Vue生成二维码卡券

最近在做项目,新加了一个需求要让用户在小程序上扫码激活自己的会员,这里的二维码要做成卡券的样式,商户可以自己的Web后台根据自己卡仓的卡券码自行生成虚拟卡券,然后直接发送给用户。

先来说说思路,因为之前在小程序上也实现过类似的生成二维码图片的功能,所以大致思路还是有的。这里的二维码卡券本质上是由:二维码图片、卡面图片二者结合在一起生成的一张图片,二维码可以直接在后端服务器上动态生成,然后由Vue读取后和卡片背景图组合在一起,最后用html2canvas获取节点直接生成图片。

先来看看效果图:

Vue生成二维码卡券-Luninousail ' Blog

正式开始

一、生成二维码

二维码生成需要用到一个QRCodeUtil工具,代码比较长,需要的可以自行到我的个人网盘中下载:下载链接

之后我们在服务器端直接编写Controller:

    @GetMapping("/QrCode")
    public void getQRCode(HttpServletRequest request, HttpServletResponse response) {
        JSONObject postData = new JSONObject();
        postData.put("data",你想添加的数据);
        try {
            OutputStream os = response.getOutputStream();
            QRCodeUtil.encode(String.valueOf(postData), null, os, true);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

postData中可以添加任意业务所需要的数据,之后访问QrCode这个路径就可以生成我们所需要的二维码了。

二、在弹出窗口内布置图片数据元素

        <div id="poster" style="position: relative" >
          <img src="/static/images/background.jpg" width="550" height="320">
          <img class="qr" id="qrCode-canvas" src="http://localhost:8024/card/QrCode">
        </div>

三、编写元素样式

  .qr{
    height: 6rem;
    position: absolute;
    bottom: 2rem;
    left: 2rem;
  }

四、编写卡券生成方法

卡券的生成需要用到html2canvas组件,这个组件先可以用npm进行安装,然后import。

npm i html2canvas --save

import html2canvas from 'html2canvas';

          //文件下载方法
          downLoadFile(fileName, canvasImg) {
            //创建一个a标签
            var a = document.createElement('a')
            //指定下载文件名称
            a.href = canvasImg;
            a.download = fileName
            //a 标签 需要点击触发。所以强制给他分派一个点击事件
            //创建一个鼠标事件
            let event = document.createEvent("MouseEvents")
            // 初始化鼠标事件
            event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
            // 指定元素对象触发事件
            a.dispatchEvent(event)
          },

          //下载虚拟卡券方法
          downloadCard(){
            let poster = document.getElementById('poster')
            html2canvas(poster, {
              scale: 2 || window.devicePixelRatio,
              dpi:600,
              useCORS: true,
              width: 550,
              height: 320
            }).then(canvas => {
              let canvasImg = canvas.toDataURL("image/png")
              console.log(this.posterDataUrl)
              this.downLoadFile("demo", canvasImg);
            });
          },

之后将downloadCard方法与按钮绑定,添加业务逻辑代码就可以生成我们需要的带二维码的卡券图片了。

五、问题与总结

5.1 在不同设备上生成的图片大小不同的问题

顺利生成出需要的图片后,我以为就结束了,结果随便测试了一下,页面元素的大小不同,生成的图片大小也会不同,这就是一个比较大的问题了,所以我们需要设置一下生成的参数,设置方法是在html2canvas方法的第二个参数里,直接设置生成图片的长度和高度,上面的代码中是已经修改过的版本,可以直接套用修改。

Vue生成二维码卡券-Luninousail ' Blog

5.2 生成空白图片的问题

造成这个问题的原因是没有打开跨域,所以访问不到图片数据,源码中已经修改,可以直接套用。

5.3 卡面背景模糊的问题

造成这个问题有两个原因

一是背景图片使用了div块,html2canvas转换div元素为图片的话好像是会模糊的,解决办法是把div块替换为img元素,外面套div块就可以了。

二是参数没有设置好,这里需要设置scale和dpi两个参数,源码已修改可以直接套用。

六、附录

参考文章

vue合成带二维码的海报

html2canvas 限制 canvas 尺寸?

html2canvas截图并且下载

html2canvas 图片合成模糊问题解决

html2canvas生成图片模糊 不清楚?两种解决方法

本文系作者 @ 原创发布在 Luninousail ' Blog。未经许可,禁止转载。

喜欢()
评论 (0)
183 文章
4 评论
25 喜欢
Top