如何在运行时在 MVC5 中显示 HTML5 Canvas 中的图像？

Question

我可以在运行时使用通用网络处理程序 (.ashx) 在 ASP.net 网络表单中显示图像。但是我找不到在 MVC 5 中运行时显示图像的方法。这是我正在做的：-

查看：-

 <section class="col-md-10 col-sm-10 img-thumbnail">
            <canvas class="col-md-12" id="canImageDisplay" width="800px"> </canvas>
        </section>

控制器：-

byte[] Img = ........;
model.Image = "data:image/png;base64," + Convert.ToBase64String(Img);
return View(model);

脚本：-

<script>
    var $canImg = document.getElementById("canImageDisplay");
    var $ctx = $canImg.getContext('2d');
    var $img = new Image();
    $img.onload = function () {
        $ctx.drawImage($img, 0, 0, img.width, img.height);
    };
    $img.src = @Model.Image;
</script>

Answer 1

你有错别字：

// not img.width & img.height without the $

$ctx.drawImage($img, 0, 0, $img.width, $img.height);

正在访问您在 JavaScript

中的数据 URL

您正在尝试在您的模型中传递 dataURL，然后尝试让 javascript 访问该模型。您不能直接执行此操作，但可以通过从原始 html 中获取模型并对其进行编码来间接执行此操作。

var vm = @Html.Raw(Json.Encode(Model));
var dataURL=vm.Image;

一种更常见的方法是 设置一个控制器方法 结果是 returns 您的数据 URL。

public class HomeController : Controller
{

    ...

    public string getDataURL()
    {
        string dataURL = "data:image/png;base64,iVBORw0KGgo...
        return (dataURL);
    }

    ...

}

当您的 javascript 需要数据 URL 时，让 javascript 直接使用 $.ajax 获取它。

$.get('/Home/getDataURL', null, function (d) {
    var dataURL=d;
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 150, 0);
    }
    img.src = dataURL;
});

如何在运行时在 MVC5 中显示 HTML5 Canvas 中的图像？

How to display image in HTML5 Canvas at runtime in MVC5?

javascript

jquery

canvas

asp.net-mvc-5