vue项目通过点击按钮实现复制图片（非图片url和base64），可发送到聊天框

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. 需求

通过接口拿到一个url，前端根据此url生成一个二维码并展示此二维码以及二维码说明文字，如图：

点击复制按钮，将红色框部分当做图片进行复制，并可通过聊天框（比如微信，qq）直接以图片形式发给客户

2. 实现

.vue文件如下：

<template>
    <div>
      <div >
        <div ></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 （此方法并没尝试成功，却给了很大提示）

以上是 vue项目通过点击按钮实现复制图片（非图片url和base64），可发送到聊天框 的全部内容， 来源链接： utcz.com/z/376533.html

回到顶部