使用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的主要内容,如果未能解决你的问题,请参考以下文章

canvas生成图片toDataURL报错的原因和解决方法

node.js用uploadify上传本地图片后,把它放到canvas,无法使用todataurl()方法

canvas 2D API的1.2 toDataURL()方法

canvas.toDataURL 由于跨域报错的解决方法

canvas toDataURL() 返回透明图片

canvas.toDataURL()报错