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