vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报

陈冠鸡

已于 2022-03-01 10:39:28 修改

阅读量1.4k

点赞数 1

分类专栏： js html2canvas vueQr 文章标签： vue.js javascript 前端

于 2022-02-24 15:30:42 首次发布

本文链接：https://blog.csdn.net/weixin_46744852/article/details/123112042

版权

给你一张海报底图，一个二维码跳转链接，如何实现生产二维码并且将底图和二维码合成为图片（合成图片方便用户保存转发）

摘要由CSDN通过智能技术生成

开始

npm install vue-qr --save   // 安装依赖

 //使用
  // 1. 页面引入组件
 import vueQr from "vue-qr";
 
  components: {
   
    vueQr,
  },
 // 2. 使用组件
 	// :logoSrc  二维码中间logo图标
 	// :text     二维码内容 如：https://www.baidu.com?data:sss
 	// :size     生成的二维码大小，我这里没用到 可以直接用css修改样式
		<vue-qr
          class="create-qr"
          :logoSrc="logo"
          :text="item.qrcodeRequestUrl"
          :style="{height:item.qrcodeY+'px',width:item.qrcodeX+'px',left:item.bannelQrcodeX+'px',top:item.bannelQrcodeY+'px'}"
        ></vue-qr>

需求：后端返回数据（海报底图，二维码内容）

首先需要先渲染出底图以及生产二维码，将二维码放入指定位置，最后再将dom转为图片，方便用户保存出图片

配置项： 海报底图，
			二维码内容（item.qrcodeRequestUrl），
			二维码大小（长、宽） （qrcodeY，qrcodeX），
			二维码X,Y轴偏移距离（就是我们用定位二维码时，top跟left的值） （bannelQrcodeX，bannelQrcodeY）

//因为 html2canvas 是将dom转成图片的 所以咱们需要先展示一下  等生成好图片后再v-if隐藏掉
<div v-if="!isOK">
      <div
      style='position: relative;'
        class="create-box"
        :ref="`imageDom${index}`"
        :