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，都会导致报错。
1816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
