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
未设置跨域允许选项
<div id="d1">
<img style="width: 300px;height: 240px;" src="http://es6.ruanyifeng.com/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'})
canvas.toDataURL()报错的解决方案全都在这了的更多相关文章
- Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
- 关于Entity Framework中的Attached报错相关解决方案的总结
关于Entity Framework中的Attached报错的问题,我这里分为以下几种类型,每种类型我都给出相应的解决方案,希望能给大家带来一些的帮助,当然作为读者的您如果觉得有不同的意见或更好的方法 ...
- 新手常见的python报错及解决方案
此篇文章整理新手编写代码常见的一些错误,有些错误是粗心的错误,但对于新手而已,会折腾很长时间才搞定,所以在此总结下我遇到的一些问题.希望帮助到刚入门的朋友们.后续会不断补充. 目录 1.NameErr ...
- Mysql only_full_group_by以及其他关于sql_mode原因报错详细解决方案
Mysql only_full_group_by以及其他关于sql_mode原因报错详细解决方案 网上太多相关资料,但是抄袭严重,有的讲的也是之言片语的,根本不连贯(可能知道的人确实不想多说) 我总共 ...
- Win7下nginx默认80端口被System占用,造成nginx启动报错的解决方案
Win7下nginx默认80端口被System占用,造成nginx启动报错的解决方案 在win7 32位旗舰版下,启动1.0.8版本nginx,显示如下错误: [plain] 2012/04/0 ...
- Mac上PyCharm运行多进程报错的解决方案
Mac上PyCharm运行多进程报错的解决方案 运行时报错 may have been in progress in another thread when fork() was called. We ...
- 安装Redis-cluster-gem install redis报错的解决方案
错误描述: [root@eshop-cache01 local]# gem install redis ERROR: Loading command: install (LoadError) cann ...
- ELK报错及解决方案
ELK报错及解决方案 1.jdk版本问题 报错如下: future versions of Elasticsearch will require Java 11; your Java version ...
- web.xml配置文件中<async-supported>true</async-supported>报错的解决方案
为什么用到这个: ssh集成了cxf,当登录系统后,发现系统报错,控制台不断输出下面信息: 2016-05-05 11:05:06 - [http-bio-8080-exec-4] - WARN - ...
随机推荐
- GDB调试指南-单步调试
前言 前面通过<启动调试>,<断点设置>,<变量查看>,我们已经了解了GDB基本的启动,设置断点,查看变量等,如果这些内容你还不知道,建议先回顾一下前面的内容.在启 ...
- 一个很粗糙的XXXX
改dnsrecon的代码改来改去都获取不到想要的结果,也不知道是不是py中的正则和PHP的有神马不一样的地方,但是用RegexBuddy测的时候是正确的,想不通啊想不通.果断不改了,自己动手PHP ...
- python中使用paramiko模块并实现远程连接服务器执行上传下载
paramiko模块 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 因此,如果需要使用SSH从一个平台连接到另外一个平台,进行一系 ...
- 创建git密钥
前言 git使用https协议,每次pull,push都要输入密码,使用git协议,使用ssh秘钥,可以省去每次输密码 大概需要三个步骤: 一.本地生成密钥对: 二.设置github上的公钥: 三.修 ...
- 初学Qt——QTableView+QSqlqueryModel
我们在显示报表时可以用到上面两个类来实现,QTableView负责对视图显示:QSqlqueryModel则负责数据模块. 这里数据查询使用QSqlqueryModel主要是这个类可以通过自己写的查询 ...
- Pro SQL Server Internal (Dmitri Korotkev)电子书翻译P8-14(12w)
数据行与数据列 数据库的控件逻辑上分成8KB的页,这些页从0开始,连续排序,对特定的文件ID和页码有借鉴意义.页码编号一定是连续的,当SQL服务器中的数据库文件增加时,新的数据页从最高的页码开始编码. ...
- SDWebImage -- 封装 (网络状态检测,是否打开手机网络下下载高清图设置)
对SDWebImage 进行封装,为了更好的节省用户手机流量,并保证在移动网络下也展示高清图,对使用SDWebImage 下载图片之前进行逻辑处理,根据本地缓存中是否有缓存原始的图片,用户是否打开移动 ...
- Hibernate和Mybatis的工作原理以及区别
一.Mybatis的工作流程图 (1).原理详见: MyBatis应用程序根据XML配置文件创建SqlSessionFactory,SqlSessionFactory在根据配置,配置来源于两个地方,一 ...
- this软拷贝详解
<script> if( !Function.prototype.softBind ){ Function.prototype.softBind = function( obj ){ va ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...