image - 将图像从数据 URL 绘制到 Canvas

Question

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

我正在使用

var strDataURI = oCanvas.toDataURL(); 

输出是经过编码的 base 64 图像。如何在 Canvas 上绘制此图像？

我想使用 strDataURI 并创建图像？可以吗？
如果不是，那么将图像加载到 Canvas 上的解决方案可能是什么？

Answer 1

给定一个数据 URL，您可以通过将图像的 src 设置为您的数据 URL 来创建图像(在页面上或纯 JS)。例如:

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

drawImage() method HTML5 Canvas Context 允许您将图像(或 Canvas 或视频)的全部或部分复制到 Canvas 上。

你可以这样使用它:

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 处理程序。基于来自 this question 的实验测试，这样做是不安全的。上面的顺序——创建图像，设置 onload 以使用新图像，然后设置 src——对于一些浏览器来说是必要的一定要使用结果。