将图像从数据 URL 绘制到画布

Question

如何在 Canvas 中打开图像？这是编码的

我正在使用

var strDataURI = oCanvas.toDataURL();

输出是编码的 base 64 图像。如何在画布上绘制此图像？

我想使用 strDataURI 并创建图像？有可能吗？

如果不是，那么在画布上加载图像的解决方案可能是什么？

原文由 Yahoo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

给定数据 URL，您可以通过将图像的 src 设置为数据 URL 来创建图像（在页面上或纯粹在 JS 中）。例如：

 var img = new Image;
img.src = strDataURI;

HTML5 Canvas Context 的 drawImage() 方法 允许您将图像（或画布或视频）的全部或部分复制到画布上。

你可以像这样使用它：

 var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

编辑：我之前在这个空间中建议，当涉及数据 URI 时，可能不需要使用 onload 处理程序。根据 这个问题 的实验测试，这样做是不安全的。上面的顺序——创建镜像，设置 onload 使用新的镜像， 然后 设置 src 是一些浏览器必须使用的结果。

原文由 Phrogz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

function drawDataURIOnCanvas(strDataURI, canvas) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", strDataURI);
}

原文由 Raphael C 发布，翻译遵循 CC BY-SA 3.0 许可协议