vue 中 html2canvas模块使用注意事项

安装：

npm install html2canvas --save

引入：

import  html2canvas from   'html2canvas'

使用：

html:

<div class="content" id="faultTree" ref="faultTree">  /*截图容器*/

    <image class="tx" :src="img + '?'+new Date().getTime()"  crossOrigin="anonymous"></image>  /*图片跨域使用注意点1：图片路径加时间戳， 添加crossOrigin="anonymous" 属性*/

    <view id="qrcode" ref="qrcode"></view>  /*联系上文 qrcode 使用 */

</div>

js:

let _this = this

let ref = this.$refs.faultTree // 截图区域

html2canvas(ref, {

      backgroundColor: '#fff',

      useCORS: true    /*图片跨域使用注意点2：配置跨域 useCORS: true  */

}).then((canvas) => {

      let dataURL = canvas.toDataURL("image/png")

      console.log(dataURL)   /*画成的图片*/

      _this.dataURL = dataURL

}).catch( () => {

    _this.$api.msg("生成失败")

})

这里有几个关键的地方：

allowTaint: true 和 useCORS: true 都是解决跨域问题的方式，不同的是使用allowTaint 会对canvas造成污染，导致无法使用canvas.toDataURL 方法，所以这里不能使用allowTaint: true

在跨域的图片里设置 crossOrigin="anonymous" 并且需要给imageUrl加上随机数

canvas.toDataURL('image/jpg') 是将canvas转成base64图片格式。

---

2019.12.5补充：

此方法只适用于H5端，app 和小程序会报错

替代的可用canvas画图保存海报，详见 uni-app用canvas截屏并且分享好友