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

前端之家收集整理的这篇文章主要介绍了将图像从数据网址绘制到画布前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在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是必要的一些浏览器,以确保使用的结果。

原文链接:https://www.f2er.com/html5/170021.html

猜你在找的HTML5相关文章