详解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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
理解javascript中的闭包
2017/01/11 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python使用openpyxl复制整张sheet
2021/03/24 Python
前台文员岗位职责及工作流程
2013/11/19 职场文书
自主招生自荐信
2013/12/08 职场文书
创业培训计划书
2014/05/03 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python