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: true 和 useCORS: true 都是解決跨域問題的方式，不一樣的是使用allowTaint 會對canvas形成污染，致使沒法使用canvas.toDataURL 方法，因此這裏不能使用allowTaint: true
2. 在跨域的圖片裏設置 crossOrigin="anonymous" 而且須要給imageUrl加上隨機數
3. canvas.toDataURL('image/jpg') 是將canvas轉成base64圖片格式。