将图像从数据网址绘制到画布

如何在Canvas中打开图像？其被编码

我使用的

var strDataURI = oCanvas.toDataURL();

输出是编码的基础64图像。我如何在画布上绘制这个图像？

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

解决方法

给定数据网址后，您可以通过将图片的src设置为数据网址来创建图片(在网页上或纯粹在JS中)。例如：

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

HTML5 Canvas Context的drawImage() method可以将图像(或画布或视频)的全部或部分复制到画布上。

你可以这样使用它：

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

编辑：我以前建议在这个空间，当涉及数据URI时可能不需要使用onload处理程序。基于this question的实验测试，这是不安全的。上面的序列创建图像，设置onload使用新的图像，然后设置src是必要的一些浏览器，以确保使用的结果。