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

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

总结

以上是脚本之家为你收集整理的将图像从数据网址绘制到画布全部内容,希望文章能够帮你解决将图像从数据网址绘制到画布所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

快乐,其实很简单!比如有我~

关注我升职加薪

标签: