canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
canvas怎么获取内容
详解canvas.toDataURL报错的解决方案全都在这了报错详尽信息
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未设置跨域允许选项
<li id="d1"> <img style="width: 300px;height: 240px;" src="http://jb51.net/images/cover_thumbnail_3rd.jpg" alt=""> <p>本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项</p> </li> <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
设置跨域允许选项
<li 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> </li> <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
到此这篇关于详解canvas.toDataURL()报错的解决方案全都在这了的文章就介绍到这了,更多相关canvas.toDataURL()报错内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
- mysql插入数据错误代码(教你解决往mysql数据库中存入汉字报错的方法)
- navicat连接mysql报错(解决Navicat Premium 连接 MySQL 8.0 报错"1251"的问题分析)
- 阿里云ecs怎么配置环境(阿里云ECS实例中运行网站常见状态码的报错分析)
- mysql数据库导入错误怎么处理(MySQL数据库导入导出数据之报错解答实例讲解)
- navicat premium连接mysql报错(Navicat连接MySQL错误描述分析)
- springboot内置tomcat启动过程(Tomcat启动springboot项目war包报错:启动子级时出错的问题)
- dockerpull的镜像位置(解决docker pull镜像报错的问题)
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- phpstudy报错(phpStudy运行帝国备份王出错解决方法)
- docker desktop怎么安装共识容器(安装Docker Desktop报错WSL 2 installation is incomplete的问题解决报错)
- python 读文件报错处理(解决python写入带有中文的字符到文件错误的问题)
- pyinstaller打包后为什么报错(Pyinstaller打包.py生成.exe的方法和报错总结)
- linuxdocker启动报错提示参数无效(docker 报错 Exited 1 4 minutes ago的原因分析)
- sql server 报错(sql server利用不同语种语言显示报错错误消息的方法示例)
- 宝塔nginx配置修改(宝塔面板安装Tengine报错:nginx: [emerg] invalid IPv6 address in resolver)
- 查看linux上是否安装redis(Linux安装Redis实现过程及报错解决方案)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
热门推荐
- 磐石云香港VPS服务器怎么样?磐石云香港VPS CN2线路测评(磐石云香港VPS服务器怎么样?磐石云香港VPS CN2线路测评)
- 基于yii2框架的开源系统(Yii框架参数配置文件params用法实例分析)
- docker映射端口(Docker初级网络端口映射的配置)
- python怎样读取mysql数据(使用Python将Mysql的查询数据导出到文件的方法)
- 数据库的创建关键字(数据库 关键字一览表)
- pythonsocket建立多用户通讯(Python socket实现多对多全双工通信的方法)
- php微信支付流程(PHP实现微信退款的方法示例)
- html5实现上传图片预览
- docker部署golang(如何使用Docker部署Go Web应用的实现)
- python中的迭代器详解(Python通过for循环理解迭代器和生成器实例详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9