Canvas引入跨域的图片导致toDataURL()报错的问题的解决


Posted in HTML / CSS onSeptember 19, 2018

本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下:

Canvas引入跨域的图片导致toDataURL()报错的问题的解决

【场景】

用户打开网页,则请求腾讯COS(图片服务器)上的图片。使用canvas绘图。

然后,用户可以重新选择图片、裁剪、上传。

【问题】

图片首次载入,选择新图片后裁剪、绘制都没有问题。但上传失败,报错如下:

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

经过了解,需要在图片首次引用时,设置crossOrigin字段:

var c=document.getElementById("cover_show");
                var img=new Image();
                img.src="http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg";
                //增加这一行:
                img.setAttribute("crossOrigin",'anonymous');
                img.onload = function(){
                    var cxt=c.getContext("2d");
                    cxt.drawImage(img,0,0,300,150,0,0,200,126);
                }

然后再次运行。发现图片首次载入时,不显示了。。。

Canvas引入跨域的图片导致toDataURL()报错的问题的解决

控制台报错如下:

Canvas引入跨域的图片导致toDataURL()报错的问题的解决

【最终解决方法】

登录腾讯云COS,找到这个储存桶,设置“跨域访问CORS”。(其他PHP/JAVA服务器同理)

Canvas引入跨域的图片导致toDataURL()报错的问题的解决

再次测试:图片显示成功,图片上传成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 #HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 #HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 #HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 #HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 #HTML / CSS
You might like
php防注
2007/01/15 PHP
生成php程序的php代码
2008/04/07 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP基础知识介绍
2013/09/17 PHP
header导出Excel应用示例
2014/01/24 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python调用摄像头拍摄数据集
2019/06/01 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python实现xml转json文件的示例代码
2020/12/30 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
设备管理实施方案
2014/05/31 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
vue中div禁止点击事件的实现
2022/04/02 Vue.js
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL