vue項目通過點擊按鈕實現復制圖片（非圖片url和base64），可發送到聊天框

1. 需求

通過接口拿到一個url，前端根據此url生成一個二維碼並展示此二維碼以及二維碼說明文字，如圖：

點擊復制按鈕，將紅色框部分當做圖片進行復制，並可通過聊天框（比如微信，qq）直接以圖片形式發給客戶

2. 實現

.vue文件如下：

<template>
    <div>
      <div id="QR-code">
        <div id="QR-img"></div>
        <div>二維碼說明文字</div>
      </div>
      <Button @click="copyImg">點擊復制圖片</Button>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      qr: null,
      imgUrl: '',
    };
  },
  methods: {
    createQR(url) {
      this.qr.makeCode(url);
    },
    copyImg() {
      html2canvas(document.getElementById('QR-code')).then(async (canvas) => {
        this.imgUrl = canvas.toDataURL();
        const data = await fetch(this.imgUrl);
        const blob = await data.blob();

        await navigator.clipboard.write([
          // eslint-disable-next-line no-undef
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
      });
    },
  },
  mounted() {
    // 生成包含地址信息的二維碼
    this.qr = new QRCode(document.getElementById('QR-img'), {
      width: 260,
      height: 260, // 高度
    });
    this.createQR('https://www.baidu.com/');
  },
};
</script>

<style lang="less" scoped>
#QR-code {
    #QR-img {
      width: 260px;
      height: 260px;
    }
}
</style>

3. 說明

此方法目前只測試了chrome瀏覽器，有效。其他瀏覽器未進行測試
相關連接：
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem/ClipboardItem
https://segmentfault.com/q/1010000024561218/a-1020000037738818 （此方法並沒嘗試成功，卻給了很大提示）