vue canvas 方法无效_Vue前端开发——制作二维码

使用开源库说明

1. qrcodejs

下载注册

npm install qrcodejs2 --save

使用

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'

效果

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

组件封装

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

组件使用

最终效果对比

对比图

开发结果图

总结

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

往期内容

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