使用canvas的toDataURL方法将图片转为base64报错:Tainted canvases may not be exported
Posted 苛学加
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用canvas的toDataURL方法将图片转为base64报错:Tainted canvases may not be exported相关的知识,希望对你有一定的参考价值。
toDataURL()报错
在使用Canvas对图片进行裁切功能时,用到了toDataURL方法。
在调试过程中,发现执行到该方法是会报以下错误:
Uncaught DOMException: Failed to execute 'toDataURL' on 'htmlCanvasElement': Tainted canvases may not be exported.
通过查找资料,整理出了出现该问题的解决方案。
一、情景再现
在百度图库随便搜索的一张图,直接拷贝图片地址在示例中使用;
在img标签中可以正常显示,但是使用toDataURL方法出现该报错提示。
1. 原因分析
仅在页面img显示时无跨域问题,但在toDataURL方法中使用该图片源时就会出现跨域问题。
可能浏览器认为仅展示是安全操作,要使用就是危险操作。
准确的讲
如果使用跨域的资源画到canvas中,并且资源没有使用CORS去请求,canvas会被认为是被污染了, canvas可以正常展示,但是没办法使用toDataURL()或者toBlob()导出数据,见Allowing cross-origin use of images and canvas。
注意 如果仅仅是展示不会有问题,但是如果需要获取做其他事情的时候 就会有同源策略的问题。
2. 解决办法
所以通过在img标签上设置crossorigin
属性值为anonymous
,及启用CORS(跨域资源共享)。
在CORS请求时不会发送认证信息,见HTML attribute: crossorigin。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<div class="wrapper">
<h3>目标</h3>
<span>将图片中的特朗普头像剪裁出来</span>
<h3>原始图预览</h3>
<img id="image" alt=""
style="width:300px; height:200px">
<h3>Canvas裁切视图</h3>
<canvas id="canvas-cut" width="100" height="100" ></canvas>
<h3>Base64结果展示</h3>
<img id="result" />
</div>
<script>
const SRC= "https://img2.baidu.com/it/u=1704416777,980035752&fm=26&fmt=auto&gp=0.jpg";
document.getElementById('image').src = SRC;
var canvas = document.getElementById('canvas-cut');
var cut = canvas.getContext('2d');
var img = new Image();
img.src = SRC;
//处理toDataURL遇跨域资源导致的报错
img.crossOrigin = 'Anonymous';
img.onload = function() {
cut.drawImage(img,290,80,100,100,0 ,0,100,100);
var imgbase64 = canvas.toDataURL("image/png");
document.getElementById('result').src =imgbase64;
};
</script>
</body>
</html>
注意事项
在启用CORS请求跨域资源时,资源必须允许跨域,才能正常返回。
其他方法
最简单的方式设置响应头Access-Control-Allow-Origin
。图片已经通过img标签加载过,浏览器默认会缓存下来,下次使用js方式再去请求,直接返回缓存的图片,如果缓存中的图片不是通过CORS请求或者响应头中不存在Access-Control-Allow-Origin
,都会导致报错。
以上是关于使用canvas的toDataURL方法将图片转为base64报错:Tainted canvases may not be exported的主要内容,如果未能解决你的问题,请参考以下文章
node.js用uploadify上传本地图片后,把它放到canvas,无法使用todataurl()方法