vue实现二维码（带logo），且允许下载

煎饼萧子

已于 2024-06-19 10:59:15 修改

阅读量409

点赞数 12

文章标签： vue.js 前端 javascript

于 2024-06-14 13:39:12 首次发布

本文链接：https://blog.csdn.net/weixin_42466536/article/details/139679261

版权

vue-qr、vue-qrcode、antd分别实现二维码功能

需求

后端返回一段链接和logo地址，前端需以二维码的形式展示，同时支持用户下载这个二维码

方案一

使用vue-qr
优点：简单方便，下载可通过右键的浏览器行为进行下载
缺点：样式有点丑且存在bug，提过issue，但是由于上游依赖存在问题官方似乎不打算解决
https://github.com/Binaryify/vue-qr/issues/145

方案二

使用vue-qrcode
代码示例

import VueQrcode from 'vue-qrcode';

  <div ref="imgRef" relative>
      <VueQrcode
         :value="qrCodeUrl"
         :width="250"
         :color="{ dark: '#000', light: '#fff' }"
         :type="'image/png'"
      />
      <div
          flex-xy-center
          absolute
          top-100px
          left-100px
          bg-white
          p-8px
      >
          <img :src="logoUrl" w-40px h-40px />
      </div>
 </div>

qrCodeUrl即为后端返回的链接或者内容，logo则使用绝对定位定位到二维码组件中间即可，（我用的是jsx以及unocss，样式可以使用属性的方式写入）。
这种方案利用二维码本身的特性，遮挡住中间一部分并不会影响扫描结果，至于为什么不用vue-qr，测试了一下，vue-qrcode比vue-qr生成的二维码要更加细节，中间添加图片遮挡vue-qr会扫不出来但是vue-qrcode可以

下载功能

需要安装html2canvas
大体思路是将整个dom节点转为canvas，再通过a标签进行下载

import html2canvas from 'html2canvas';

function downloadImage() {
    downloadLoading.value = true;
    html2canvas(imgRef.value as unknown as HTMLElement, {
        allowTaint: true, // 允许跨域图像污染画布，默认false可能阻止某些图像加载
        useCORS: true, // 告诉html2canvas在加载图片时使用CORS头，以支持从其他源加载图片
    })
    .then((canvas) => {
        const link = document.createElement('a'); // 创建一个超链接对象实例
        link.download = 'qr-code'; // 设置要下载的图片的名称
        link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
        link.click(); // 触发超链接的点击事件
    })
    .finally(() => {
       downloadLoading.value = false;
    });
}