使用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,都会导致报错。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported"是一个报错信息,意味着当使用canvas的toDataURL()方法时,画布上存在被污染的图像(即跨域的图像),不能导出。原因是在使用drawImage()方法将跨域的图片绘制到canvas上。解决方法包括以下两个步骤: 1. 在引用图片之前设置跨域资源允许权限。这可以通过在创建image对象之后设置image对象的crossOrigin属性为'anonymous'来实现。示例代码如下: ``` var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = '图片地址'; ``` 请确保在设置crossOrigin属性之后再设置图片的src属性。 2. 确保存放图片的服务器开启了跨域允许权限。否则,可能会出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误提示。你可以联系服务器管理员或者在服务器端配置相应的跨域请求头。 通过以上两个步骤,你应该能够解决"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported"的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported [已解决]....](https://blog.csdn.net/qq_35516360/article/details/122065183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Canvas引入跨域的图片导致toDataURL()报错的问题的解决](https://download.csdn.net/download/weixin_38693419/14830620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [canvas生成图片toDataURL报错(Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasEl...](https://blog.csdn.net/sumimg/article/details/115375085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值