服务器图片转化为base64进行海报合成

问题：html2canvas.js 在合成海报时，海报如果是服务器地址将会报跨域，这时需要将图片转化为base64格式再去进行合成。
附：html2canvas.js文件

<!-- 海报弹窗 -->
<divPopup:parPopup.sync="bannerPopup"@momentCloseClick="momentCloseClick"
><div class="bannerPopup"><div class="bannerImg" ref="saveImgRef"><!-- <img :src="require('assets/banner.png')" alt="" /> --><img :src="bannerImgUrl" alt="" /><div class="ewm"><img :src="ewmLink" alt="" /></div><div class="bannerImgRead"><img :src="bannerLink" alt="" /></div></div><div class="bannerTxt">长按保存，分享好友</div></div>
</divPopup>

getBase64Image(url) {return new Promise((resolve, reject) => {var Img = new Image();var dataURL = "";Img.setAttribute("crossOrigin", "Anonymous");// Img.crossOrigin = "Anonymous";  // 支持跨域图片 Img.crossOrigin = "*";Img.src = url + "?v=" + Math.random();Img.onload = function () {// 要先确保图片完整获取到，这是个异步事件var canvas = document.createElement("canvas"); // 创建canvas元素var width = Img.width; // 确保canvas的尺寸和图片一样var height = Img.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(Img, 0, 0, width, height); // 将图片绘制到canvas中dataURL = canvas.toDataURL("image/jpeg"); // 转换图片为dataURLresolve(dataURL);};});
},
// 生成二维码
createEWM(url) {if (!url) return this.$toast("未获取到链接！");this.$toast.loading({message: "生成中...",forbidClick: true,duration: 0,});// let ewmLink = "http://www.baidu.com";let ewmLink = url;QRCode.toDataURL(ewmLink).then((url) => {// console.log(url);this.ewmLink = url;setTimeout(() => {this.html2canvas();// 动画时间为300ms，得做延迟}, 400);}).catch((err) => {console.error("二维码生成失败", err);});
},
async html2canvas() {let realHtml = this.$refs.saveImgRef; //需要截图的包裹的（原生的）DOM 对象let width = realHtml.offsetWidth; //获取dom 宽度let height = realHtml.offsetHeight; //获取dom 高度let rect = realHtml.getBoundingClientRect();let scrollTop =document.documentElement.scrollTop || document.body.scrollTop;// let url =//   "https://vncdn.mobi88.cn/20220111/ct/szjh_kfbd/iamges/banner.png";let url ="https://hzcnds.oss-cn-shenzhen.aliyuncs.com/test/1637913097首页图.png";let imgUrl = await this.getBase64Image(url);console.log("结果", imgUrl);this.bannerImgUrl = imgUrl;html2canvas(realHtml, {allowTaint: false,taintTest: false,width: width, //dom 原始宽度height: height, //dom 原始高度scale: 2,useCORS: true,scrollY: 0,scrollX: 0,backgroundColor: null,// x: rect.left,// y: rect.top,// scrollY: -scrollTop,// canvas: canvas2}).then((canvas) => {let dataUrl = canvas.toDataURL("image/png", 1);// 生成的链接this.bannerLink = dataUrl;// 关闭加载this.$toast.clear();});
},

问题二：有些服务器地址的图片在转化base64时还是会报跨域，不知道是不是服务器设置的问题。目前阿里云服务器地址的图片通过。
更新：如果服务端没有给图片设置请求头里的Access-Control-Allow-Origin字段的值为*或者你当前的域名。就算前端搞了这个跨域的玩意儿上去，依旧是拿不到图片的。

服务器图片转化为base64进行海报合成相关推荐

Python将图片转化为base64编码以及如何在html网页上显示
1.Python将图片转化为base64编码 test.py # -*- coding: utf-8 -*- import base64 #这一段代码时间图片转化为base64 with open(& ...
如何将图片转化为base64编码格式，在css中显示
在前端开发过程中有时候需要图片.svg.ico等转成base64直接在css中使用,可以提高加载速度.将图片转换成base64编码,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js ...
JS将图片转化为base64编码，并实现点击下载，js实现图片下载的实操博客
背景需求在前端的工作中,经常碰到点击下载图片的需求,但是有一种情况大家经常碰到,就是点击下载地址之后,在浏览器窗口默认打开了,并没有调用浏览器进行下载如果你正在完善这个需求,一直解决不了,恭喜你看 ...
图片转化为base64编码python版本
写在前面:好久没写python了难免有些生疏,尴尬的搓手手,学以致用,还需勤练.变量名都会命错也是绝了起因:写markdown文档想插入图片,百度了一下选择直接嵌入的base64编码,安全放心.可转 ...
Vue将图片转化为base64
在div写入上传文件的input 框 <template><div><div><input type="file" ref="u ...
图片为什么要转化为base64格式
今天有个同事问我了一个问题,为什么要把图片的url转化为base64格式.于是我就去网上查了一下,总结一下成果. 首先图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代 ...
java 本地图片压缩转base64并限制文件大小
/** 本地图片转base64并限制文件大小 @param imagePath 图片全路径 @param sizeLimit 大小整数限制的大小 KB 1024 @return 返回值为0,ima ...
图片在线转换base64
DEMO预览图片在线转换base64 图片在线转换base64--实现方法采用 FileReader 对象的 readAsDataURL 方法进行图片的转换! JS实现获取上传按钮,文字按钮,显 ...
将图片转化成base64格式
// 如果用户选择了图片就将图片转化为base64位的格式进行存储和使用// 第一步:先读取文件const base = new FileReader()// console.dir(base)// ...

服务器图片转化为base64进行海报合成

服务器图片转化为base64进行海报合成相关推荐

最新文章

热门文章