h5端实现长按二维码保存图片功能

最新推荐文章于 2024-04-12 08:56:51 发布

琴～～

最新推荐文章于 2024-04-12 08:56:51 发布

阅读量918

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/134991601

版权

h5端实现长按二维码保存图片功能

1、生成二维码

<script>
 export default {
   methods: {
       // 生成二维码
    crateQRcode () {
      if (this.qrcode) {
        this.qrcode.clear();
        this.qrcode.makeCode(this.shareResult.url); // 生成新的二维码
      } else {
        this.qrcode = new QRCode('qrcode', {
          width: 111,  //宽度
          height: 111, // 高度
          text: this.shareResult.url, // 二维码内容--一般为后端传递过来的链接地址，当扫码二维码的时候，会进行相应的跳转
          render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        });
      }
      this.toSaveImage();
    },
    // 展示二维码
    showQRcode () {
      this.$nextTick(() => {
        this.crateQRcode();
      })
    },
   },
}
</script>

2、将二维码转化为图片

<script>
 export default {
   methods: {
   // 二维码转化为图片
    toSaveImage() {
      // 保存图片
      this.$nextTick(async () => {
        let imageWrapper = document.getElementById("qrcode");
        try {
          let canvas = await html2canvas(imageWrapper, {
            height: 111,
            width: 111,
            backgroundColor: null,
            useCORS: true,
            allowTaint: true,
            scrollX: 0,
            scrollY: 0,
            dpi: window.devicePixelRatio * 2,
          });
          let res = canvas.toDataURL("image/png");
          this.qrCodeShow = false;
          document.getElementById('imgCode').setAttribute('src',res);
        } catch (err) {
          console.log(err)
        }
      });
    },   
}
</script>