Vue前端开发——制作二维码

使用开源库说明

1. qrcodejs

下载注册

npm install qrcodejs2 --save

使用

<template>  <div>    <div ref='qrCodeDiv'></div>  </div></template><script>import QRCode from 'qrcodejs2';export default {  data() {    return {      qrCode: null    }  },  mounted() {    this.$nextTick(() => {      // 初始化二维码      this.initQrCode()      // 设置二维码内容      this.qrCode.makeCode('xxx')    })  },  methods: {    initQrCode() {      const option = {        text: 'https://www.baidu.com',        width: 200,        height: 200,        colorDark: '#333333', // 二维码颜色        colorLight: '#ffffff', // 二维码背景色        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H      }      this.qrCode = new QRCode(this.$refs.qrCodeDiv, option)    }  }}</script><style></style>

2. mcanvas

源码文档地址：https://github.com/xd-tayde/mcanvas/blob/master/README_ZH.md

下载

npm install mcanvas --save

可能会出现的问题

可能会出现的问题

解决方法：

npm install canvas --canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/

使用

import { MCanvas } from 'mcanvas'

<template> <div> <img :src='imgSrc' alt='合成图片'> </div></template><script>import { MCanvas } from 'mcanvas'export default { data() { return { imgSrc: '' } }, mounted() { this.$nextTick(() => { // 初始化面板 this.initDraw() }) }, methods: { initDraw() { this.mc = new MCanvas({ width: 400, height: 1000, backgroundColor: 'black', }); const image = '/bgg.png' this.mc.background(image, { left: 0, top: 0, color: '#fff', type: 'origin', }) // text 添加文字数据基础函数； .text('择偶十分', { width: '300px', align: 'center', color: '#fff', pos: { x: -65, y: 130, }, }) // draw 最终绘制函数，用于最终的绘制； .draw(b64 => { this.imgSrc = b64 }); } }}</script>

效果

个人主页为基本结构，填充名称和介绍二维码

组件封装

接下来根据上面的两个插件合成我们需要的效果，在基础卡片填充昵称，介绍和二维码，components 下新增组件 tao-qrcode.vue

<template>  <div>    <div ref='qrCodeDiv'         style='opacity:0'></div>    <img :src='imgSrc'         alt=''>  </div></template><script>import QRCode from 'qrcodejs2';import { MCanvas } from 'mcanvas'export default {  props: {    textArr: {      type: Array,      default: () => {        return [          {            title: '择偶十分',            width: '100%',            align: 'left',            wordBreak: true,            normalStyle: {              color: '#000'            },            pos: {              x: 40,              y: 130,            },          },          {            title: '利用canvas合成的个人卡片<br>带二维码',            width: '100%',            align: 'left',            normalStyle: {              type: 'fill',              font: 'normal bold 14px arial,sans-serif',              color: '#606266',              lineheight: 4,              wordBreak: true,            },            pos: {              x: 40,              y: 280,            },          }        ]      }    },    bgImage: {      type: String,      default: '/bgg.png'    },    content: {      type: String,      default: 'https://www.toutiao.com/c/user/token/MS4wLjABAAAAq6JKN37NNac3j4pbQHelIpA3ylMsnVabEe3JKay1SPs/'    }  },  data() {    return {      qrCode: null,      mc: null,      imgSrc: ''    }  },  mounted() {    this.$nextTick(() => {      // 初始化二维码      this.initQrCode()      // 设置二维码内容      this.qrCode.makeCode(this.content)      // 初始化并合并画布      this.initDraw()    })  },  methods: {    initQrCode() {      const option = {        width: 200,        height: 200,        colorDark: '#333333', // 二维码颜色        colorLight: '#ffffff', // 二维码背景色        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H      }      this.qrCode = new QRCode(this.$refs.qrCodeDiv, option)    },    initDraw() {      const mc = this.mc = new MCanvas({        width: 400,        height: 1000,        backgroundColor: 'black',      });      const canvas = document.querySelector('canvas')      const suiyinImg = this.canvasToImage(canvas).src      mc.background(this.bgImage, {        left: 0,        top: 0,        type: 'origin',        backgroundColor: '#fff'      })      this.textArr.forEach(item => {        // text 添加文字数据基础函数；        mc.text(item.title, {          ...item        })      });      // watermark 添加水印函数，基于 add 函数封装；      mc.watermark(suiyinImg, {        width: '20%',        pos: 'rightBottom',        margin: 25      })      // draw 最终绘制函数，用于最终的绘制；      mc.draw(b64 => {        this.imgSrc = b64      });    },    canvasToImage(canvas) {      const image = new Image()      image.src = canvas.toDataURL('image/png')      return image    },  }}</script><style lang='scss' scoped></style>

组件使用

<template> <div> <tao-qrcode v-bind='config' /> </div></template><script>export default { name: 'demo', data() { return { config: { textArr: [ { title: '择偶十分', width: '100%', align: 'left', wordBreak: true, normalStyle: { color: '#000' }, pos: { x: 40, y: 130, }, }, { title: '利用canvas合成的个人卡片<br>带二维码', width: '100%', align: 'left', normalStyle: { type: 'fill', font: 'normal bold 14px arial,sans-serif', color: '#606266', lineheight: 4, wordBreak: true, }, pos: { x: 40, y: 280, }, } ], bgImage: '/bgg.png', content: 'https://www.toutiao.com/c/user/token/MS4wLjABAAAAq6JKN37NNac3j4pbQHelIpA3ylMsnVabEe3JKay1SPs/' } } }}</script><style lang='scss' scoped></style>

最终效果对比

对比图

开发结果图

总结

本文使用QRcode 生成二维码，然后用 mcanvas 进行将生成的二维码进行合成，重新生成了一张图片，常见业务场景是生成二维码分享卡片或者进行图片加水印等，代码也全部在上面了，如果对目录及代码结构不能理解的私信我发你源码地址。