在使用html2canvas截屏生成图片的时候,会出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.这个问题.
如下:

正常的图片应该是这样:

异常的图片,头像部分无法显示:

报错:

Access to image at 'http://192.168.0.220/cwcdstatic/studentheadimage/444444199606089999.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://192.168.0.220/cwcdstatic/studentheadimage/444444199606089999.jpg net::ERR_FAILED

重点来了,解决方案 (网上的别的方法都试了)

1. 添加"allowTaint"和"useCORS"属性.亲测不行,不知道其它作者测试是否能行.

new html2canvas(document.getElementById('qianduanwz'), {
  backgroundColor: "transparent",
  allowTaint: true,
  useCORS: true 
}).then(canvas => {
   // ……
});

2. img标签添加"crossorigin="anonymous"属性.亲测不行

<img :src="bgurl" alt="" class="width100b" crossorigin="anonymous"/>

3. 将图片的image标签替换为div背景图的形式.亲测不行

<div class="user-img" :style="`background: url(${ imageURL )}) no-repeat center center; background-size: 66px 82px;`" />

现在的解决方案是改源码:

如下:
将箭头指向的地方更改为:

img.src = /^data:image/.test(src) ? src : src + '?' + new Date().getTime();

即可

快速进入源码目录,按住Windows系统 Crrl + 鼠标左键,Mac系统Command + 点击即可进入源码目录

图片加载正常:

效果图:

写在后面

虽然说这样修改源码的方式可以暂时解决问题,但不是长久之计,每次重新clone 项目之后安装的依赖都需要如此处理,一旦忘记就会造成最开始的bug,希望html2canvas的作者是否可以考虑一下,给个最简单的方法呢.

感谢您的阅读,如果此文章或项目对您有帮助，请给个赞吧,GitHub的小伙伴可以顺手star一下！好了，快动手试试吧.有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

GitHub: https://github.com/langyuxiansheng

更多信息请关注公众号: “笔优站长”