canvas 报跨域的错

最新推荐文章于 2022-12-26 10:30:20 发布
最新推荐文章于 2022-12-26 10:30:20 发布
阅读量1k 收藏 1
点赞数
分类专栏： javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alice17571/article/details/112313655
版权
在处理canvas跨域错误时，通常会为图片设置crossOrigin属性为'anonymous'。然而，文章指出在Safari浏览器中，这种方法可能无效。作者分享了遇到的苹果Mac本上Safari浏览器的跨域问题，并记录了一种通过获取图片数据后再传递给图片以解决此问题的解决方案。
摘要由CSDN通过智能技术生成

这个问题已经很常见了

在图片标签上加上crossOrigin="anonymous"

 

let image = new Image();  

image.src = url;

image.crossOrigin = "anonymous"

image.setAttribute("crossOrigin",'anonymous');

 

但是今天发现在safira浏览器  苹果本上依然会出现这个跨域问题  于是百度到别人的建议 特此记录下来

 

通过XMLHttpRequest对象获取图片的blob数据，然后再传递给图片src，就能完美解决

function getImageBlob(url, callback) {

 const xhr = new XMLHttpRequest();

 xhr.open('GET', url, true);

 xhr.responseType = 'blob';

 xhr.onload = function () {

   if (parseInt(this.status, 10) === 200) {

     if (typeof callback === 'function') {

       callback(URL.createObjectURL(this.re

最低0.47元/天 解锁文章
alice17571
关注
专栏目录
解决canvas 图片跨域问题
ru2234567的博客
11-08 1145
var img = new Image(); img.setAttribute('crossOrigin', 'Anonymous'); img.src = /^data:image/.test(canvasSrc) ? canvasSrc: canvasSrc + '?' + new Date().getTime(); //canvasSrc为cancas图片的URL
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
09-22
主要介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
记一次canvas由于本地缓存引起的CORS跨域问题
一只如履薄冰的程序猿
07-15 1077
我在使用canvas进行绘画涂鸦开发的过程中，将图片作为canvas的背景图，在保存画布的时候想将背景图和当前画布内容进行整合的时候，发生加载背景图的跨域错误 源码如下： this.canvas = document.getElementById('canvas'); this.Txt = document.getElementById('txt'); this.ctx = canvas.getContext('2d'); this.c.
html2canvas使用记录，与图片跨域报错问题
qq_56327890的博客
01-17 705
html2canvas解决截图时截图内存在跨域图片报错问题
JS 图片跨域问题
happygirlnan的专栏
05-18 5393
使用JS创建图片元素然后在JTopo或three.js中使用时报以上错误，JS代码如下： var _t=this; var houseImg = new Image(); houseImg.crossOrigin='*'; houseImg.crossOrigin = "Anonymous"; houseImg.src = url; houseImg.onload = function () { _t.backgroundNode=new JTopo.Node(); _t..
canvas中设置了Anonymous属性依然报图片跨域，canvas绘制图像在移动端模糊，安卓无法保存下载 base64图片
weixin_46554760的博客
11-20 1054
移动端图像编辑项目中遇到的几个坑坑，记录一下，都是干货呀！ 问题1 ： 安卓无法保存下载 base64图片 解决方案：最好的解决方案就是传给后端让后台解码返回，尝试了各种方法，转成blob等其他格式都不行，不要浪费时间（因为发现网上很多问这个问题的帖子，都没有答案）。还有人说base64地址太长传给后台报参数太长传不过去， 用form-data即可， 本来form-data就是用来传递文件的，用get,post传参肯定是有长度限制的；自己去学习一下前后端交互这方面的知识吧； 问题2：使用canvas
img添加属性crossOrigin='anonymous'图片无法访问
热门推荐
彭世瑜的博客
02-21 2万+
问题描述： 子域名m.demo.com 需要访问www.demo.com 下的图片，代码如下 可以正常访问 <img src="http://www.demo.com/uploads/demo.png"> 不能正常访问 <img src="http://www.demo.com/uploads/demo.png" crossOrigin='anonymous'> 经过测...
safari浏览器canvas图片crossOrigin跨域失败
weixin_30776545的博客
03-19 1111
最近在做一个canvas绘图的项目，需要在canvas上引入一张跨域图片，当调drawImage和getImageData API时会提示跨域错误 解决方案一 在访问图片response新增Access-Control-Allow-Origin:* canvas获取图片是，新增crossOrgin属性 const img = new Image(); img.crossOrigin = 'an...
基于阿里云 OSS 下载图片跨域问题
qq_36437172的博客
07-05 4657
问题描述：我们通过 URL 图片连接下载图片至本地，产生图片请求异常：No 'Access-Control-Allow-Origin' header is present on the requested resource。 我们通过 XMLHttpRequest 加载外部图片文件 //图片下载 download(row){ const$that=this constimgUrl=row.fileUrl letxhr=newXMLHttpRequest() x...
vue 图片跨域问题解决
douqujie的专栏
03-24 7003
let image = new Image(); let that = this; image.crossOrigin = ''; image.src = url; image.src = url + '?time=' + new Date().valueOf(); // 允许跨域操作 image.setAttribute('crossOrigin', 'anonymous'); image.o...
详解Canvas 跨域脱坑实践
09-22
本文将详细解析Canvas跨域问题的产生原因以及解决方案。 首先，介绍Canvas绘图过程中可能遇到的跨域问题。当使用Canvas的`drawImage()`方法将图片绘制到画布上时，如果图片来源于不同的域，并且该域没有在响应头中...
详解如何解决canvas图片getImageData,toDataURL跨域问题
09-22
本文将深入探讨如何解决Canvas图片在跨域场景下的`getImageData()`和`toDataURL()`问题。 一、跨域配置基础 当一个网页中的Canvas试图操作来自其他域的图片数据时，浏览器会执行同源策略，防止恶意网站获取用户...
Web - H5 - 解决下载图片跨域问题
Abner 的博客 (:
06-07 2467
在互联网，没有绝对的安全！ 这个就是写这篇文章的最大感受！有时候我们尽力保护的东西，曾以为坚不可摧。但可能真的只是徒劳！ 代码实现 首先什么也别说，先来看看 能够直接 跨域，破解防盗链图片的下载 方法： function getImgBlob(imgUrl) { return new Promise((resolve, reject) => { const img = new Image(); img.setAttribute('crossorigin', 'anonymous.
解决几个CORS跨域问题
Small_Pang的博客
01-11 1349
解决几个CORS跨域问题 自己在实际开发中使用canvas.drawImage外域图片，出现了跨域问题； 前端： image.setAttribute('crossOrigin', 'anonymous'); 以上这一句可以完美解决canvas引起的前端跨域问题； 网上还有一种方法是，但是我试了无效，也贴出来给大家尝试一下 <meta http-equiv="Access-Contro...
前端Canvas绘制图片跨域问题解决
CSDN新星计划JAVA赛道TOP5、CSDN内容合伙人、JAVA领域优质创作者、资深JAVA开发深耕JAVA领域。
08-27 2039
functionimageUrlToBase64(){ //一定要设置为let，不然图片不显示 constimage=newImage(); //解决跨域问题 image.setAttribute('crossOrigin','anonymous'); constimageUrl='http://ip:8081/baseImagePath/appUserHos...
关于CORS跨域问题的解决办法，运用于Chrome
DKEN33211的博客
05-15 709
关于CORS跨域问题的解决办法，运用于Chrome程序背景发生的错误新出现的错误 程序背景 想在本地测试html 发生的错误 index.js:33 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 在程序中运用了toDataURL导致的如上的错误。 解决方式：添加代码image.setAttribute('crossOrigi
阿里云oss访问图片出现跨域问题
qq_36657291的博客
12-26 1853
解决阿里云oss访问图片出现跨域问题
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存
最新发布
09-15
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存_Pytorch-imdb-classification
uniapp canvas图片跨域
09-15
在uniapp中，如果想要在canvas中绘制跨域图片，可以通过将图片转换为base64格式然后使用context.drawImage()方法来实现。首先，你需要创建一个画布并设置其样式，例如： ``` <canvas style="background-color: #fff; border: 1px solid #d0d0d0; width: 100vw; height: 100vh; position: absolute; left: 100%;" canvas-id="myCanvas" id="myCanvas"></canvas> ``` 然后，你可以将图片转换为base64格式，并在canvas中使用context.drawImage()方法将其绘制出来。这样就可以成功在canvas中使用跨域图片了。如果遇到H5本地图片画布无法成功的情况，你可以尝试使用小程序来实现。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值