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相关推荐

fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported
最近几期我想分享一下我的项目中使用vue+fabric.js过程中遇到的坑. 就比如给canvas加背景时,就会出现跨域的报错提示. 我用的是vue-element相关框架,在此不多做赘述,后面再出专 ...
cesium中的billboard加载在线图片报错Tainted canvases may not be loaded
加载项目中的图片没有问题,加载在线图片的时候就会报错解决方法: image.setAttribute('crossOrigin', 'anonymous'); 原因:canvas 绘制的时候在线图片 ...
Canvas - 错误：Tainted canvases may not be exported
记录日期:2019年6月26日 22点21分 Canvas 的内容保存为图片,但是一直不成功.报错信息如标题,意思指被污染的画布不能被导出. 理论上来讲,导出为图片是一定可行的,但是被污染的画布是不允 ...
使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...
canvas学习——toDataURL()方法
toDataURL()方法 1.toDataURL()方法是什么? toDataURL()是canvas对象的一种方法,用于将canvas对象转换为base64位编码: 2.利用canvas的toDa ...
canvas的toDataURL()方法
canvas的toDataURL()方法是返回一个包含图片展示的数据URL.可以使用 type 参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 一.语法 canvas.toDataUR ...
canvas跨域：Tainted canvases may not be exported解决方法
现象: 使用html2canvas.js插件绘图时跨域图片绘制过程中报错:Tainted canvases may not be exported 解决方法: var content = docume ...
php 图片文件转base64编码格式,php如何将图片转为base64编码格式
php将图片转为base64编码格式的方法:首先读取图片流:然后利用[base64_encode]函数进行编码格式转换即可. PHP保存Base64图片base64_decode的问题 PHP对Bas ...
Nodejs 使用 Buffer 将图片转为 base64
一直以为图片转为 base64 很复杂,结果今天看了下 Docusaurus 的 plugin-ideal-image 插件源码,居然只要一行代码就完事了: const toBase64 = (ext ...

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

toDataURL()报错

一、情景再现

1. 原因分析

2. 解决办法

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

最新文章

热门文章