Vue中调用qrcodejs2生成二维码，并将canvas转为图片格式使得移动端使用时可长按识别。（含批量生成二维码时遇到的坑，封装组件

最新推荐文章于 2025-06-25 11:10:14 发布

ironybbb

最新推荐文章于 2025-06-25 11:10:14 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端功能实现 vue实用代码片段文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_43185419/article/details/121555114

业务需求，需要使用JS将url链接转为二维码图片。查到可以使用qrcodejs2传入内容、大小获得一个画布上的二维码。但是canvas标签在移动端上无法使用长按识别的功能，所以还需要把canvas对象转换为图片img标签。

网上找到的相关资料大多是通过html2canvas来将二维码转为图片的，但通过这种方法，总有一些奇奇怪怪的问题，比如有时候明明转成了base64，但是页面不显示。后来还是选择直接转为image，使用起来也更灵活。

首先安装qrcodejs2：

npm install qrcodejs2 --save

可以参考使用文档：https://www.npmjs.com/package/qrcodejs2
需要注意的一些踩坑点：

qrcode（）生成方法，不能写在created（）中调用，因为页面必须先渲染后再生成二维码。初始化时放在mounted钩子中，并延迟300
批量生成二维码时，虽然传入了不同的内容值，出现了页面二维码显示重复，后台输出其实是生成了不同二维码的。原因是生成的二维码挂在了同一个div上，所以批量生成的时候需要传入id值！！！！
如果传入的宽高值小，生成的二维码可能会出现不清晰的情况，最好的解决办法的生成二维码时放大，再使用css缩小。比如说想要一个80*80的二维码图片，可以传入height：400，width：400，再在标签外部使用css设置宽高值。
解决方法参考了：解决生成二维码长字符串显示模糊问题
不要在二维码的div上设置宽高！不要在二维码的div上设置宽高！不要在二维码的div上设置宽高！否则会和第三点使用css设置宽高值冲突哈哈哈。

这里直接放上封装好的子组件了，qrcodeimg.js：

<template>
  <div>
    <img v-if="imgData != ''" :src="imgData" />
    <div :id="qrid" class="qrcode" v-show="imgData == ''"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2" // 引入qrcode
export default {
   
   
  name: "QrCodeImg",
  props: ["qrid", "qrContent", "qrWidth", "qrHeight"],
  data() {
   
   
    return {
   
   
      imgData