html2canvas解决图片空白，网络图片跨域

解决思路：前端将网络图片转换成64位格式

不需要设置什么阿里云服务器跨域，nginx配置header等等

1、准备一个canvas标签用于转换64位格式图片

<canvas ref="headCanvas" style="position: absolute;height: 0; width: 0;opacity: 0;"></canvas>

2、关键方法

注意：一点要给网络图片手动添加在后面拼接时间戳，否则canvas.toDataURL方法会报错

//将网络图片转化为Base64ImageToBase64() {let vm = this//一定要设置为let，不然图片不显示，下面解释↓let image = new Image();//解决跨域问题image.setAttribute('crossOrigin', 'anonymous');
//this.invincibleData.thumb这里是网络图片路径，
//比如：https://down.yantongtech.cn/data/upload/images/2021-03-29/8567a979ba7ab9fd94e49866f095b9e5.jpg?1617081289278image.src = this.invincibleData.thumb;//image.onload为异步加载image.onload = () => {var canvas = vm.$refs.headCanvas;var context = canvas.getContext('2d');canvas.width = image.width;canvas.height = image.height;context.drawImage(image, 0, 0, image.width, image.height);var dataurl = canvas.toDataURL("image/png");
//得到64位格式this.invincibleData.thumb64 = dataurl}},

3、网络图片成功转换成64位图片之后，在使用html2canvas的时候，完美解决图片空白或图片跨域，有疑问欢迎评论交流

html2canvas解决图片空白，网络图片跨域相关推荐

html2canvas解决图片空白，图片样式错位
一.解决图片样式错位问题,使用稳定版本 "html2canvas": "^1.0.0-rc.4",这个版本比较稳定,经测试大部分机型都适用. 二.html2ca ...
canvas截图中图片空白（跨域导致）
最近项目中遇到一个"保存至相册"的功能,由于是老功能重构,此部分没有改动,但是最近频繁出现问题:保存至相册时里面地图显示空白. 刚开始的时候也是一头雾水,正好好的功能咋出问题了,而 ...
图片裁剪工具vueCropper跨域解决
图片裁剪工具vueCropper跨域解决 1.报错原因:本项目的图片放在亚马逊,需求是直接拿到网络图片进行裁剪 2.解决:将图片转化成base64 Vue.prototype.getBase64Img ...
node解决关于请求必应图片API的跨域问题
关于请求必应图片API的跨域问题必应每天都会更新一张背景图片,如果我们想要在自己的网站中每天动态得更新这种图标就需要用到API去请求,必应官方API 请求实例: https://cn.bing.co ...
解决阿里云OSS跨域问题
解决阿里云OSS跨域问题现象本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...
图片转base64跨域问题
vue图片转base64跨域问题,亚马逊存储 1.问题说明:如果资源存在是放在国内(如七牛)在转base64的时候不会发生跨域,但本项目存储空间选择的是亚马逊S3,在转化的时候出现了跨域 2.解决 2 ...
用P3P header解决IE下iframe跨域访问时候session丢失的问题
用P3P header解决IE下iframe跨域访问时候session丢失的问题整合客户的登录时,或者其他一个网站通过iframe时,特别是一个http页面,访问一个https页面时,常常会sess ...
本地跨域处理ajax,Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...
解决css引用字体跨域问题
解决css引用字体跨域问题参考文章: (1)解决css引用字体跨域问题 (2)https://www.cnblogs.com/victorlyw/articles/9970805.html 备忘一下 ...

html2canvas解决图片空白，网络图片跨域

解决思路：前端将网络图片转换成64位格式

不需要设置什么阿里云服务器跨域，nginx配置header等等

html2canvas解决图片空白，网络图片跨域相关推荐

最新文章

热门文章