报错详尽信息
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
关键词
- canvas.toDataURL()
- crossOrigin
- Access-Control-Allow-Origin
前言
最近在做一个创意类的图片合成工具,大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能,项目中用到了fabric.js这个画板库,最后一步在保存图片的时候报上面的一长串错误,墙内墙外搜了一遍,给出的解决方案都不全面,为避免同学们再次踩坑,于是有了此文
正文
我们在convertDOM2Image时,如果DOM内存在图片资源,该资源所在的web-server是不支持跨域的,保存图片是不会成功的。
因此在排查问题时,首先要确定
- web-server是否允许跨域,我们以nginx为例,response-header内要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比较高的可以根据主域名自定义)
- 如果是img标签, 是否添加了crossorigin="anonymous", 如果是Image对象,同样是否添加了改属性obj.crossOrigin='anonymous'
- 如果还不行,这里先不把答案放出来,我们先看看栗子
在接下来的栗子中我们会用到将Image转换为canvas对象的方法
function convertImageToCanvas(image) { // 创建canvas DOM元素,并设置其宽高和图片一样 let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); // 我们在实际的开发中,需要将抓换后的base64图片编码传输到后台图片服务器,由server直接存储或者生成一张图片; // 所以会用到 toDataURL console.log(canvas.toDataURL('image/jpeg')) return canvas; }
栗子1
本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项
<div id="d1"> <img style="width: 300px;height: 240px;" src="http://jb51.net/images/cover_thumbnail_3rd.jpg" alt=""> <p>本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项</p> </div> <button onclick="setCanvas('d1')">canvas保存</button>
function setCanvas(DOMID) { let img = document.getElementById(DOMID).querySelector('img') document.body.appendChild(convertImageToCanvas(img)) }
很显然,报错
栗子2
本地标签内设置跨域允许选项, web-server未设置跨域允许选项
这次连图片都出不来,直接报错
这个好理解,浏览器同源策略限制嘛
Access to image at 'xxxx' (redirected from 'xxxx') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
栗子3
本地未设置跨域允许选项crossorigin=anonymous
, web-server
设置跨域允许选项
报错,妥妥的。
栗子4
本地标签内设置跨域允许选项crossorigin=anonymous
, web-server
设置跨域允许选项
<div id="d4"> <img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous"> <p>本地设置跨域允许选项`crossorigin=anonymous`,`web-server`设置跨域允许选项</p> </div> <button onclick="setCanvas('d4')">canvas保存</button>
居然可以了,但是~如果在代码内设置跨域呢?
栗子5
function setCanvas(DOMID) { let img = document.getElementById(DOMID).querySelector('img') img.crossOrigin= 'anonymous' document.body.appendChild(convertImageToCanvas(img)) }
报错
我看官方文档的意思是必须同步设置crossOrigin=anonymous,该图片凭证才会被信任
This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.
否则缓存的图像数据仍然会被画布视为有污染的跨源内容.
怎么办?重新取一遍图片呗,加个随机数,图片还是那个图片,不过加了个马甲,浏览器就不认识了
栗子6
function setCanvas(DOMID) { let img = document.getElementById(DOMID).querySelector('img') img.src =img.src+'?v='+Math.random() img.crossOrigin= 'anonymous' img.onload=()=>{ document.body.appendChild(convertImageToCanvas(img)) } }
binggo, 完美解决
所以我们在开发过程中,新建图片,更换图片,还原图片等功能代码内,最好每一次都加个随机数,以保证源都是最新的,不走缓存
多说一点吧,关于fabric.js的相关跨域配置见下方
let _fabricConfig = { // .... crossOrigin:'anonymous' }; /* fabric对象 */ let _fabricObj = new fabric.Canvas(id, _fabricConfig); // 新建图片对象时 let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'}) // 动态更新图片时 let currentActive = _fabricInstance.getActiveObj(); currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})
github:http://github.com/phillyx
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 初始之部制作人气漫画改编游戏《我家大师兄脑子有坑》参展2024WePlay
- 《异环》「奇点测试」定档11.28 超自然都市轻喜剧即将放送!
- 16层乐队.2024-大快朵颐【摩登天空】【FLAC分轨】
- 群星.1988-电视金曲巡礼【EMI百代】【WAV+CUE】
- 群星.1992-电视金曲巡礼VOL.2【EMI百代】【WAV+CUE】
- 廖昌永《情缘HQ》头版限量[低速原抓WAV+CUE]
- 蔡琴《老歌》头版限量编号MQA-24K金碟[低速原抓WAV+CUE]
- 李嘉《国语转调》3CD[WAV+CUE]
- 谭咏麟《爱的根源 MQA-UHQCD》2022头版限量编号 [WAV+CUE][1G]
- 江洋 《江洋原创琵琶作品专辑》[320K/MP3][118.08MB]
- 江洋 《江洋原创琵琶作品专辑》[FLAC/分轨][228.33MB]
- 《战舰世界》语音包文件夹位置介绍
- 《CSGO》送好友皮肤方法介绍
- 《山羊模拟器重制版》发售平台说明
- 刘德华2002-美丽的一天[香港首批大包装首版][WAV]