vue截屏生成二维码（常见的几种二维码生成方法和保存至本地）

近年来随着技术的日新月异二维码生活当中很重要的一部分，它可以把常见的名片、文本、wifi网络、电子邮件、短信、电话号码、网址等信息生成对应的二维码图片，我们只要通过扫码就可轻松的获取到二维码中的信息了。

二维码（2-dimensional bar code）是按照一定规律在平面上绘制的几何图形，通过分布的黑白相间的图形记录数据符号信息。由于二维码读取速度快，可存储数据类型多等优势被广泛使用，特别是矩阵式二维码（也叫qrcode）几乎无处不在。下面是QRCode的基本结构，由定位图形（二维码定位）、格式信息（纠错级别）、版本信息（二维码规格）、数据（二维码信息）和纠错码字（纠错信息）5部分构成，Vue二维码生成就是通过插件按规则在画布上绘制出相应的二维码图像的。

图片来源“互联网”

qrcode是可以在服务器和客户端上运行的二维码生成器，内容支持数字，字母数字，汉字和字节模式及混合模式。可以通过canvas在前端在线绘制出QR码，也可以将QR码另存为图片。Vue中安装qrcode只要执行安装命令：npm install -S qrcode就可以在项目中使用了，qrcode当前最新版本1.4.4。

创建一个qrcode.vue模板并引入qrcode，用一个 canvas标签用来绘制二维码。content是从父级传过来的数据（二维码中的内容），options定义的是二维码的属性选项（可以控制二维码的纠错等级、图像类型、品质、边距、颜色等等），qrcode()定义的是方法利用qrcode将我们的数据写入到canvas中，后面的error是完成之后的回调函数（可以用来抛出错误/成功信息）。父级调用很简单，不会的可以参考文章：Vue实战030:子组件与父组件之间方法调用。

qrcodejs2是制作二维码的JavaScript库，可以通过获取 DOM 的标签并使用HTML5 Canvas绘制成二维码。不依赖任何库且支持跨浏览器，兼容IE，Chrome，Firefox，Safari，Opera，Safari，Android等浏览器。Vue中安装qrcodejs2只要执行安装命令：npm install -S qrcodejs2就可以在项目中使用了，qrcodejs2当前最新版本0.0.2。

创建一个qrcodejs2.vue模板并引入qrcodejs2，qrcodejs2本身就是用Canvas绘制的二维码所以我们只要给个容器来存放即可。qrcode是在原有的画布上更新二维码，而qrcodejs2则是将每次生成的二维码插入到容器中（解决办法就是在每次绘制二维码之前将容器清空）。

前面两种方式只能生成简单的二维码，如果你想让你的二维码更丰富可以使用vue-qr。vue-qr是一款Vue组件安装之后直接引入即可使用，它提供了丰富的配置属性如设置logo图片、背景图片、背景颜色、尺寸、边距等。这里主要需要了解下vue-qr的配置属性，我们只要按需求修改对应的属性参数就可以得到我们想要的二维码图像了（类似的Vue插件还有vue-qrcode、vue-qriously、vue-qart ）：

这里以vue-qr为例说下原理，这里我利用a标签来下载。在下载前我们需要先获取到img标签中的src属性值，这里是用base64编码存储的png图片地址。创建一个隐藏的a标签然后将其赋值给a标签的href属性，然后定义下download属性给图片命个名称就可以实现图片下载了。如果是canvas标签绘制的图像，那么我们就需要用到toDataURL()方法导出图片地址，再把该地址抛给a标签即可。更多下载方式可以参考文章：JavaScript实战002：前端各种文件下载功能的实现。

vue生成二维码的插件有很多，适合自己的才是最好的。不同的工具绘制方式不同，生成的图片样式也有所差异（下图内容都是qrcode，但是生成的样式就各不相同）。有前辈们为我们封装好了组件，二维码生成已经变得很简单了。

​ 以上内容是小编给大家分享的Vue常见的几种二维码生成方法和保存至本地，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！