使用canvas的toDataURL方法将图片转为base64报错：Tainted canvases may not be exported

浅浅的花香味﹌ 2022-10-07 01:58 139阅读 0赞

# toDataURL()报错 #

在使用Canvas对图片进行裁切功能时，用到了toDataURL方法。  
在调试过程中，发现执行到该方法是会报以下错误：  
![在这里插入图片描述][20210615173513894.png]  
`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][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`，都会导致报错。

[20210615173513894.png]: /images/20221005/28bdd0d573ba4dc1b6f4ffb375468ffa.png
[Allowing cross-origin use of images and canvas]: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
[HTML attribute_ crossorigin]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin