阅读 4223

vue中完美解决html2canvas图片跨域问题

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>
复制代码

这里有几个关键的地方:

  1. allowTaint: trueuseCORS: true 都是解决跨域问题的方式,不同的是使用allowTaint 会对canvas造成污染,导致无法使用canvas.toDataURL 方法,所以这里不能使用allowTaint: true
  2. 在跨域的图片里设置 crossOrigin="anonymous" 并且需要给imageUrl加上随机数
  3. canvas.toDataURL('image/jpg') 是将canvas转成base64图片格式。
评论