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

Question

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

我正在使用

var strDataURI = oCanvas.toDataURL(); 

输出是编码的基础64图像.如何在画布上绘制此图像？

我想使用strDataURI 和创建图像？它是poosible？
如果不是那么可能是什么可能是在画布上加载图像的解决方案？

Answer 1

给定数据URL,您可以通过将图像设置为数据URL来创建图像(在页面上或纯粹在JS中)src.例如:

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;

编辑:我之前在此空间中建议,在onload涉及数据URI时可能没有必要使用处理程序.根据这个问题的实验测试,这样做是不安全的.上面的序列 - 创建图像,设置onload使用新图像,然后src为某些浏览器设置必要的-is以确保使用结果.

Answer 2

如果您不喜欢onload回调方法，您可以像这样“承诺”它：

let url = "data:image/gif;base64,R0lGODl...";
let img = new Image();
await new Promise(r => img.onload=r, img.src=url);
// now do something with img

Answer 3

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);
}