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图片格式。
所有评论(0)