vue-qr和html2canvas的简单使用

安装导入插件
npm install --save html2canvas
npm install --save vue-qr

    import vueQr from "vue-qr";
    import html2canvas from "html2canvas";

html 部分

    <div ref="share_image" class="footer_right">
    <vue-qr
        class="bbicode"
        v-if="shareItem.shareUrl"
        :logoScale="20"
        :text="shareItem.shareUrl"
        :margin="0"
        :dotScale="1"
    ></vue-qr>
    </div>
    <div class="share_box_footer">
    <button @click="toCanvas">保存到本地</button>
    </div>

js部分

    toCanvas(){
      this.shareLoading = true
      html2canvas(this.$refs["share_image"], {
            useCORS: true,
            allowTaint: true,
          }).then(async canvas => {
            this.shareLoading = false
            let dataURL = canvas.toDataURL("image/png");
             const a = document.createElement("a");
              a.href = dataURL;
              a.download = "dataURL";
              a.click();
           })
    },

效果展示