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实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
CSS3 制作精美的定价表
Apr 06 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
django从后台返回html代码的实例
2020/03/11 Python
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
Ref与out有什么不同
2012/11/24 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
大学旷课检讨书
2014/01/28 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
求职信范文怎么写
2015/03/19 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
导游词之唐山景点
2019/12/18 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL