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

如何在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是必要的一些浏览器,以确保使用的结果。

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码