html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，比如图片存在了别人的云上，截图的时候将不会显示图片，解决方案如下： Js部分
import html2canvas from 'html2canvas'
data () {
return {
imageUrl: 'http://xxx.example.com', // 跨域地址
screenshotImage: '' // 保存的base64地址
}
},
methods: {
async shareHandle () {
const opts = {
useCORS: true
}
const ele = this.$refs.screenshot
const canvas = await html2canvas(this.$refs.screenshot, opts)
this.screenshotImage = canvas.toDataURL('image/jpg')
}
}
复制代码html代码
<div class="share-wrap" ref="screenshot">
<img :src="imageUrl+'?'+new Date().getTime()" crossOrigin="anonymous">
</div>
复制代码这里有几个关键的地方：
allowTaint: true和useCORS: true都是解决跨域问题的方式，不同的是使用allowTaint会对canvas造成污染，导致无法使用canvas.toDataURL方法，所以这里不能使用allowTaint: true- 在跨域的图片里设置
crossOrigin="anonymous"并且需要给imageUrl加上随机数 canvas.toDataURL('image/jpg')是将canvas转成base64图片格式。