使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题

背景

项目中需要一个生成海报功能，因为图片是上传到了阿里云oss上面，所以导致html2canvas截图得时候，图片显示空白然后配置html2canvas日志功能 logging: false，发现图片报了跨域问题，首先开启了html2canvas useCORS:true, 发现并没有什么用。

解决思路

解决问题搜索过程中发现一篇大佬的文章，说阿里云服务器配置允许跨域之后，还是不行得情况下，将浏览器disabled cache 勾选上，试了下发现可以正常生成海报，但是也不可能给每个用户教他们去开始这个disabled cache 。此时想到是否可以使用请求来请求图片转换一下，碰巧又发现一篇文章可以将图片地址发送一次请求，获取请求返回得值作为图片路径，但是发现还是报错跨域，然后对比开启disabled cache，发现请求头中多出一个Cache-Control ：no-cache ，于是设置请求头，至此跨域问题解决，下面上代码

/*** 点击图片将需要生成海报得oss图片做下请求*/
checkewm(ewm) {this.tempPoster = Object.assign({}, ewm);this.boxShow = true;this.getImage(this.tempPoster.pic,'dialogBgImg')this.getImage(this.ewm,'dialogEwm')
},
/*** 将oss图片做一次请求，转换下，网络路径图片都可以* url: 网络图片得路径* imgId: 网络图片img标签得id*/
getImage(url,imgId) {console.log(url,imgId)var xhr = new XMLHttpRequest();xhr.open('get', url, true);// 设置请求头（这一步得设置不然oss图片还是跨域）xhr.setRequestHeader("Cache-Control", "no-cache");xhr.responseType = 'blob';xhr.onload = function () {if (this.status == 200) {document.getElementById(imgId).src =  URL.createObjectURL(this.response);console.log('this.response',this.response)}};xhr.send();
},
/*** 生成海报并下载得方法*/
createdimg() {// 转换需要生成海报得图片// this.$refs.imageWrapper 需要截图得容器html2canvas(this.$refs.imageWrapper, {useCORS: true,logging: false,}).then((canvas) => {// 创建a标签下载const link = document.createElement("a"); // 创建a标签link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码link.setAttribute("download", "图片canvas.png"); // 利用了a标签的download 来下载 canvas图片link.style.display = "none"; // 将图片隐藏起来document.body.appendChild(link); // 插入到其中link.click();});},

使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题相关推荐

阿里云OSS 图片处理
首先放个阿里云OSS图片处理接口文档阿里云官方地址 oss图片处理接口文档我们有时会抱怨用户上传的图文中图片文件大了(假如说3M的图片).导致生成的网页打开速度慢,怎么办呢? 问题分析:网页打开慢 ...
阿里云OSS 图片处理api（custom）
首先放个阿里云OSS图片处理接口文档阿里云官方地址 OSS 图片处理接口文档我们有时会抱怨用户上传的图文中图片文件大了(假如说3M的图片).导致生成的网页打开速度慢,怎么办呢? 问题分析:网页打开 ...
小书匠绑定阿里云oss+阿里云oss图片url永久有效设置--菜鸟小回
小书匠绑定阿里云oss+阿里云oss图片url永久有效设置一.开通阿里云oss服务阿里云oss服务二.创建Bucket 三.文件管理创建image/ 目录四.进入小书匠绑定访问入口:如图位置复 ...
**关于阿里云oss图片批量上传问题解析**
关于阿里云oss图片批量上传问题解析背景最近在项目开发过程中遇到的问题,消耗了比较久的时间,过程曲折,虽然最终达到目的,但是鉴于各种常用的云数据在对象存储方面大同小异,所以记录一下. 理一下思路: ...
阿里云OSS图片生成缩略图和获取视频的封面方法
?x-oss-process=image/resize,m_fill,w_200,quality,q_60 在图片的地址后面加上以上代码,可以生成缩略图 resize 调整大小 quality 清晰度 ...
阿里云OSS图片服务器使用，不要怀疑，可以用
不废话了,oss是什么这些去姑够或度娘查: 我一springboot项目为例, 配置oss服务器首先配置图片服务器的配置信息图中oss为oss服务器的配置信息,tmpFilePath是本地存放临时 ...
flutter阿里云OSS图片上传
一.选择图片: 使用插件 image_picker: "^0.5.0+3" 使用image_picker选择图片,代码如下: // 相机拍照或者从图库选择图片pickImage(c ...
file does not exist 阿里云OSS图片上传遇到的问题
./uploads\20171209/0497b8dd16e72c6fcf5bfd552f535a81.png file does not exist 原代码 function aliyun($sav ...
.Net6阿里云OSS图片上传
1:申请注册阿里云账号,找到AccessKey管理 2:添加并创建AccessKey,获取AccessKey ID. AccessKey Secret的值 3:AccessKey ID. Access ...
阿里云OSS图片上传类
1.阿里云基本函数 /*** 把本地变量的内容到文件* 简单上传,上传指定变量的内存值作为object的内容*/ public function putObject($imgPath,$object) ...

使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题

使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题

背景

解决思路

使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题相关推荐

最新文章

热门文章