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

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

【场景】

用户打开网页，则请求腾讯COS（图片服务器）上的图片js代码。使用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);

}

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

控制台报错如下：

【最终解决方法】

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

再次测试：图片显示成功，图片上传成功。

转载于:https://www.cnblogs.com/good10000/p/10590237.html

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

canvas生成图片toDataURL报错的原因和解决方法
canvas生成图片toDataURL报错的原因和解决方法参考文章: (1)canvas生成图片toDataURL报错的原因和解决方法 (2)https://www.cnblogs.com/suna ...
fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported
最近几期我想分享一下我的项目中使用vue+fabric.js过程中遇到的坑. 就比如给canvas加背景时,就会出现跨域的报错提示. 我用的是vue-element相关框架,在此不多做赘述,后面再出专 ...
解决浏览器跨域加载本地文件报错 Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy
报错: Failed to load resource: net::ERR_FILE_NOT_FOUND Access to script at 'xxx' from origin 'null' ha ...
Latex引入新宏包siunitx导致的报错：Command \fs already defined. \newcommand{\fs}{\CJKfamily{fs}}
出错原因用我的英伦腔翻译一下这个报错信息,不难看出是\fs命令在引入的宏包中已经被定义,而文章使用了\newcommand,无辜的以为\fs命令在之前没有被定义,显然就会出错(\fs你城府好深啊. ...
h5跨域访问图片_h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
使用canvas的toDataURL方法将图片转为base64报错：Tainted canvases may not be exported
toDataURL()报错在使用Canvas对图片进行裁切功能时,用到了toDataURL方法. 在调试过程中,发现执行到该方法是会报以下错误: Uncaught DOMException: Fai ...
谷歌浏览器升级到91出现跨域问题，导致cookie保存的sessionId不一样
先来说一下问题: 谷歌浏览器升级到91之后出现一个跨域问题,导致cookie保存的接口sessionId不一致,从而后台出现session不一致问题.如下图: 这是第一个接口: 这是第二个接口这本应 ...
canvas生成海报toDataUrl报错，解决方案
微信公众号H5页面,生成带参数二维码海报的思路. 一.生成带参数二维码使用插件phpqrcode,这个功能在之前的文章中有记录.不在赘述. 二.生成canvas画布先将海报内容通过cavans画出 ...

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

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

最新文章

热门文章