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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
jquery replace方法去空格
2017/05/08 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python逆序打印各位数字的方法
2018/06/25 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python xlwt模块使用代码实例
2020/06/10 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
人力资源经理自我评价
2014/01/04 职场文书
运动会广播稿200字
2014/01/15 职场文书
公务员保密承诺书
2014/03/27 职场文书
门面房租房协议书
2014/12/01 职场文书
致运动员加油稿
2015/07/21 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js