zoukankan      html  css  js  c++  java
  • 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'), {
           260,
          height: 260, // 高度
        });
        this.createQR('https://www.baidu.com/');
      },
    };
    </script>
    
    <style lang="less" scoped>
    #QR-code {
        #QR-img {
           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动态组件
    服务端渲染和nuxt简单介绍
    nuxt Window 或 Document未定义解决方案
    知乎专栏开放性api
    小程序的一些坑
    搭建微服务器(续)
    调研pwa和sw
    mysql索引原理以及优化
    装饰器
    斐波那契数列和小青蛙跳跳跳问题
  • 原文地址:https://www.cnblogs.com/XHappyness/p/14286472.html
Copyright © 2011-2022 走看看