canvas跨域图片报Tainted canvases may not be exported

最新推荐文章于 2023-09-07 12:56:52 发布
最新推荐文章于 2023-09-07 12:56:52 发布
阅读量411 收藏
点赞数
分类专栏： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36657291/article/details/106756641
版权
js 同时被 2 个专栏收录
50 篇文章 0 订阅
订阅专栏
vue
46 篇文章 0 订阅
订阅专栏

canvas转图片 跨域问题 

图片转base64 dataURL = canvas.toDataURL('image/jpeg', 1) 报错

Img.setAttribute("crossOrigin", "anonymous"); 

 

HUAI-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解锁canvas导出图片跨域的N种姿势小结
01-19
本文介绍了解锁canvas导出图片跨域的N种姿势小结，分享给大家，具体如下： Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 上面这个错误相信大家用canvas执行 toDataUrl导出图片的时候都遇到过，图片服务器域名和当前不一样，因为安全策略不允许跨域导出图片 解决这个跨越问题方式有多种 一 、将图片转换成base64 图片变成base64就没有域名一说了，自然不存在跨域 注意：图片转换成base64加
Tainted canvases may not be exported
topc2000的博客
06-28 1万+
Tainted canvases may not be exported.场景解决方法总结 场景 在使用html canvas进行绘画，之后想通过canvas的Api toDataURL toBlob 转换为base64格式 或者二进制临时文件的，但是报错了。错误的提示内容如下 DOMException: Failed to execute ‘toBlob’ on ‘HTMLCanvasElem...
新概念英语第三册01-20课（转）
weixin_34117211的博客
05-01 946
Lesson 1A Puma at large 逃遁的美洲狮 1、美洲狮是大的，Pumas are large,猫一样的 cat-like动物 animals它们被发现 which are found在美洲。 in America. 美洲狮是一种大型猫科动物Pumas are large, cat-like animals它们被发现在美洲。 which ...
html2canvas跨域问题
qq_24343389的博客
04-28 3127
1、html2canvas使用时所涉及的图片，必须遵循同源策略，即：域名，协议，端口相同2、在不同源的情况下会报一下错误Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Object.on...
Canvas - 错误：Tainted canvases may not be exported
weixin_30697239的博客
06-26 1517
记录日期：2019年6月26日 22点21分 Canvas 的内容保存为图片，但是一直不成功。报错信息如标题，意思指被污染的画布不能被导出。 理论上来讲，导出为图片是一定可行的，但是被污染的画布是不允许被导出的。 问题就在于，什么叫被污染的画布。 找到官网说明，参考链接：https://developer.mozilla.org/en-US/docs/Web/HTML/CO...
canvas跨域：Tainted canvases may not be exported.
ljqscdnljq的博客
07-20 1万+
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.  在使用canvas的toDataURL方法，如果图片跨域，会报如上错误。 解决方法是给image标签加一个允许跨域的属性：crossorigin="anonym...
canvas跨域：Tainted canvases may not be exported解决方法
dragon974539495的博客
04-30 1万+
现象： 使用html2canvas.js插件绘图时跨域图片绘制过程中报错：Tainted canvases may not be exported 解决方法： var content = document.getElementById("theme"+index); var w = content.offsetWidth; var h = co...
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
weixin_34249678的博客
11-24 2万+
2019独角兽企业重金招聘Python工程师标准>>> ...
EngineErrorMap 错误码
wang_we的专栏
03-17 3770
EngineErrorMap.md Cocos Creator Engine Errors 0100 %s not yet implemented. 1000 cc.ActionManager.addAction(): action must be non-null 1001 cocos2d: removeAction: Target not found 1002 cc.ActionManager.removeActionByTag(): an invalid tag ...
canvas生成图片toDataURL报错(Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasEl)
sumimg的博客
04-01 1万+
现象：在使用canvas的toDataURL（）方法时，控制台有时会报错：Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 原因：这是由于之前由drawImage（）向canvas导入的图片跨域而导致的。 解决方法： 1、在引用图片之前打开跨域资源允许权限（一定要注意顺序）： var img=new Image; img.setA
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
01-19
本文介绍了Canvas引入跨域的图片导致toDataURL()报错...Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 经过了解，需要在图片首次引用时，设置crossOrigin字段：
快速解决Canvas.toDataURL 图片跨域的问题
09-02
出现Canvas.toDataURL 图片跨域问题怎么解决呢？下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法。一起跟随小编过来看看吧
详解如何解决canvas图片getImageData,toDataURL跨域问题
09-22
主要介绍了详解如何解决canvas图片getImageData,toDataURL跨域问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas跨域图片报Tainted canvases may not be exported.解决办法
weixin_30302609的博客
11-14 808
我们做微信活动，经常会碰到生成图片进行分享的需求。生成的图片中肯定包含微信头像，这时就会碰到canvas转图片时的跨域问题。 一开始我是把微信头像下载到服务器上来避开跨域问题的，但这样做太累了，也浪费服务器存储空间。 之后再网上搜索后得到如下解法 var img = new Image(); img.src = userInfo.headimgurl;//微信头像地址 img.set...
使用canvas的toDataURL方法将图片转为base64报错：Tainted canvases may not be exported
苛学加记事
07-02 2662
1.情景展示 　　当使用canvas 将图片转为base64报错信息如下： Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported 2.解决方案 　　第一种情况：本地测试&图片引自本地 通过file协议打开的html文件进行的本地测试 解决方案：放在服务器上就可以正常转换了！ 第二种情况：被转换的图片，引自网络或者服务器 解决方案
js-获取图片链接canvas绘制时报错No ‘Access-Control-Allow-Origin‘ header
最新发布
weixin_44384273的博客
09-07 325
图片允许跨域，设置响应头Access-Control-Allow-Origin
关于Client Library is missing or invalid.的解决办法
01-05 3996
关于Client Library is missing or invalid.的解决办法 今天，真是气人，写好的文章点保存，提示失败，只好重新再打一编，昨天在IB Expert 中执行一个创建数据库的脚本，可是提示上面的 错误，以前也遇到过一回，后来不知怎么的好了，仔细查看了一下选项，发现有一个Option->Environment，下面有User interface、 I
项目中unity遇到的错误解决（为自己）2017
蛰伏--当你不够强大时，就不要放弃努力
07-10 1万+
////////////////////GoogleprotobufReflection error with Unity when using il2cpp#5422//// What version of protobuf and what language are you using? Version: v3.6.1 Language: C# What operating system (Linux, Windows, ...) and version? MacOS Mojave 10....
import ... from和import {} from 的区别
热门推荐
qq_36657291的博客
08-01 5万+
1.import { isvalidUsername ，validateUrl} from '@/utils/validate' //也可以分开两次写，导入的时候都带花括号 2.import isvalidUsername from '@/utils/validate' //导入的时候没有花括号 ES6中export及export defau...
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.但是没有跨域
05-23
这个错误通常出现在跨域请求图片后，尝试将该图片转换为 base64 格式的数据时。但是，即使没有跨域问题，浏览器也会将某些情况下加载的图片视为“污染”的，例如来自于本地文件系统或者使用了 HTTP Basic 认证的图片。在这种情况下，如果你尝试将这些图片转换为 base64 格式，就会遇到“Tainted canvases may not be exported”错误。 解决这个问题的方法有两种： 1. 使用 `crossOrigin` 属性加载图片，这样图片就不会被视为“污染”的。示例代码如下： ```javascript var img = new Image(); img.crossOrigin = 'anonymous'; // 通过这个属性设置图片的跨域属性 img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL('image/png'); } img.src = 'https://example.com/image.png'; ``` 2. 如果你无法控制图片的跨域属性，可以尝试将图片绘制到 canvas 上时使用 `toBlob()` 方法代替 `toDataURL()` 方法。这样可以避免将图片转换为 base64 格式，从而避免“Tainted canvases may not be exported”错误。示例代码如下： ```javascript var img = new Image(); img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); canvas.toBlob(function(blob) { var fileReader = new FileReader(); fileReader.onloadend = function() { // 使用文件读取器读取 blob 数据 var dataURL = fileReader.result; } fileReader.readAsDataURL(blob); }, 'image/png'); } img.src = 'https://example.com/image.png'; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值