html2canvas的使用且使用时遇到生成不了base64

废话不多说！

我遇到的问题是图片太大导致生成不了

1. 首先html2canvas的版本，手动指定1.0.0-rc.4

2. 在页面上调用自己需要保存的html元素

• html代码

<div ref="downImg" class="down_img">
   <div class="down_inter">
      <div class="down_bg_cont">
         <div class="title">扫一扫 向我付款</div>
         <div class="bg_code">
            <img crossOrigin="anonymous" :src="qrCode" alt="" />
         </div>
         <div class="down_text">
            <div class="bg_money" v-if="params.amt">
               ￥{{ params.amt | thousands }}
            </div>
            <div class="name">{{ user.accountName }}</div>
         </div>
      </div>
   </div>
</div>

• js代码

methods:{
    // 保存图片
    saveImg(){
        (window.html2canvas || html2canvas)(_self.$refs.downImg, {
           backgroundColor: null,
           allowTaint: false,
           useCORS: true,
        }).then((canvas) => {
           console.log(canvas);
           let url = canvas.toDataURL("image/jpeg", 1).split("base64,")[1];
           // downFile 我这边是使用客户端的保存图片交互
           downFile("base64", url, function (data) {
              if (data) {
                 _self.$Layer.toast.show("保存成功");
              } else {
                 _self.$Layer.toast.show("保存失败，请重试");
              }
           });
        });
    }
}

由于我遇到的问题是保存图片太大导致base64生成不了，所以就使用了缩放，把图片缩小即可以保存

然后就可以保存图片啦！！！