canvas生成海报toDataUrl报错，解决方案

本文主要是介绍canvas生成海报toDataUrl报错，解决方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信公众号H5页面，生成带参数二维码海报的思路。

一、生成带参数二维码
使用插件phpqrcode，这个功能在之前的文章中有记录。不在赘述。

二、生成canvas画布
先将海报内容通过cavans画出来。再将canvas图片利用toDataUrl转换为Base64编码。然后，将Base64编码复制给图片显示出来。

var canvas = document.getElementById("myCanvas");
var imgBase64=canvas.toDataURL("image/png");
                var oimg = document.getElementById("img");
                oimg.src=imgBase64;

三、显示的图片可以通过长按保存来实现存储。
注意：canvas画布中所有的元素都需要加载完毕，否则会出现toDataUrl报错的。
因此，所有的图片或文档的属性上需要加上：crossorigin=“anonymous”

这篇关于canvas生成海报toDataUrl报错，解决方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！