html2canvas图片跨域_html2canvas截图微信头像

最新推荐文章于 2024-07-31 11:17:59 发布

灵魂莲华

最新推荐文章于 2024-07-31 11:17:59 发布

阅读量587

点赞数

文章标签： html2canvas图片跨域

本文链接：https://blog.csdn.net/weixin_42522669/article/details/112092093

版权

方案一：html代码，利用img标签的crossorigin属性

微信头像，指向微信的头像地址，跨域请求资源，资源可以显示，但是html2canvas会有跨域的问题，主要利用是 crossorigin="anonymous"，使html2canvas可以截取到该标签

如果是自己的服务器上的图片，要提供给其他域名下的页面，crossorigin="annoymous"可能导致错误，这个时候把自己的服务器上访问图片的那段请求加上add_header Access-Control-Allow-Origin *;配置，(这是nginx服务器上的配置)。但也要注意资源可能被随意下载，所以可以只在需要公开的目录加上这个配置。

方案二：js代码，下载图片，并读取为base64格式，然后设置为img的src

 createPosterImage:function(base64data){  this.wxAvatar = base64data  this.html2canvas( document.getElementById('postCanvas'), { useCORS:true } ).then(canvas => { this.posterUrl = canvas.toDataURL('image/png') this.loading = false });  },  downloadAvatar:function(url, callback){ var httpRequest = null; if (window.XMLHttpRequest) // 除了IE外的其它浏览器 { httpRequest = new XMLHttpRequest(); }else{ httpRequest = new ActiveXObject("MsXml2.XmlHttp"); } httpRequest.responseType = "blob"; httpRequest.onreadystatechange = function(){ if ( httpRequest.readyState == 4 ){ if ( httpRequest.status == 200){ var value = this.response; // var blob = window.URL.createObjectURL(value); var reader = new window.FileReader(); reader.readAsDataURL(value); reader.onloadend = function() { var base64data = reader.result; if (callback){ callback(base64data); } };  } } }; httpRequest.open('GET', url, true);  httpRequest.send(null);  }, 调用就是this.downloadAvatar(this.wxAvatar, this.createPosterImage)