详解canvas.toDataURL()报错的解决方案全都在这了


Posted in HTML / CSS onMarch 31, 2020

报错详尽信息

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://3water.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'})

github:http://github.com/phillyx

到此这篇关于详解canvas.toDataURL()报错的解决方案全都在这了的文章就介绍到这了,更多相关canvas.toDataURL()报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 #HTML / CSS
详解HTML5常用的语义化标签
Sep 27 #HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 #HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 #HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 #HTML / CSS
html2canvas截图空白问题的解决
Mar 24 #HTML / CSS
html5视频常用API接口的实战示例
Mar 20 #HTML / CSS
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
师范大学应届生求职信
2013/11/21 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
公司担保书格式范文
2014/05/12 职场文书
赤壁观后感(2)
2015/06/15 职场文书
团委副书记工作总结
2015/08/14 职场文书
Python绘制分类图的方法
2021/04/20 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android