使用开源库说明
  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>

  1. mcanvas

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

下载

npm install mcanvas --save

可能会出现的问题

vue前端如何制作成工具（Vue前端开发制作二维码）(1)

可能会出现的问题

解决方法：

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>

效果

vue前端如何制作成工具（Vue前端开发制作二维码）(2)

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

组件封装

接下来根据上面的两个插件合成我们需要的效果，在基础卡片填充昵称，介绍和二维码，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>

最终效果对比

vue前端如何制作成工具（Vue前端开发制作二维码）(3)

对比图

vue前端如何制作成工具（Vue前端开发制作二维码）(4)

开发结果图

总结

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

往期内容

Vue 前端开发——打印功能实现 前端开发——可视化搭建推荐一波 Vue前端开发-表单封装 前端开发——工具篇 Vue前端开发——组件篇 Vue前端开发——数据交互axios Vue前端开发——使用高德地图WebApi

,