canvas.toDataURL报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
最新推荐文章于 2022-11-02 16:07:40 发布
于 2019-04-23 18:16:54 发布
报错
用canvas的 toDataURL 方法将图片转为base64时报错,报错信息如下所示:
原因
度娘了下发现是 图片和网站域名不一致,导致跨域出现的问题;
解决办法
图片设置 crossOrigin属性:img.setAttribute(“crossOrigin”,‘anonymous’)
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.setAttribute("crossOrigin",'anonymous');//需要放在图片赋值前,否则部分浏览器会报错
img.src = "images/car1.jpg";
img.onload=function(){
ctx.drawImage(img,0,0,100,100);
canvas.toDataURL("image/jpeg");
</script>
canvas.toDataURL报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
报错用canvas的 toDataURL 方法将图片转为base64时报错,报错信息如下所示:原因度娘了下发现是 图片和网站域名不一致,导致跨域出现的问题;解决办法图片设置 crossOrigin属性:img.setAttribute(“crossOrigin”,‘anonymous’)完整代码 <canvas id="myCanvas" width="200" hei...
报错详尽信息
Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
canvas.toDataURL()
crossOrigin
Access-Control-Allow-Origin
最近在做一个创意类的图片合成工具,大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能,项目中用到了fabric.js这个画板库,最后一步在保存图片的时候报上面的一长串错误,墙内墙外
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
一句话总结:解决方案是图片设置crossOrigin属性
图片设置 :crossOrigin属性代码片段:img.setAttribute("crossOr...
现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的。
解决方法:...
现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的。
解决方法:
1、在引用图片之前打开跨域资源允许权限(一定要注意顺序):
var img=new Image;
img.setA
1.情景展示
当使用
canvas 将图片转为base64
报错信息如下:
Uncaught DOMException:
Failed to
execute 't
oDataURL' on '
HTMLCanvasElement': Tainted
canvases may not be exported
2.解决方案
第一种情况:本地测试&图片引自本地
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no
npm install --save
html2
canvas
IOS某些版本生成图片失败,解决方案使用^1.0.0-rc.4版本
npm uninstall
html2
canvas
npm install --save
html2
canvas@^1.0.0-rc.4
二、
html
<div ref="
canvasContent">内容...</div> //需要画成图片的内容
<div class="
canvas_img v-if="canva
当执行以下API时,报错:
let domTarget = event.target;
let text = domTarget.toDataURL("image/png"); // 本行报错
报错内容如下:
Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’:
Tainted canvases may not be export