昨夜突发奇想,想试一试在js前端生成二维码信息,大致的了解一些二维码的原理传送门,有想了解可以点击看一下,今早就想试一下实际操作,感叹好多写博客的自己是不是都不尝试啊,顾自己总结自己实现的方式,希望可以帮到需要的同学。
1.简单粗暴(QRCode.js)
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。github地址,在应用中只需要引入qrcode.min.js就可以使用了,基本用法如下,当然还有一些参数可以设置。
//最基本的语法
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.xxx.com"); // 设置要生成二维码的链接
</script>
//带参数
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://www.runoob.com",//要生成的信息
width: 128,
height: 128,
colorDark : "#000000", //二维码颜色(默认黑色)
colorLight : "#ffffff", //二维码背景颜色(默认白色)
correctLevel : QRCode.CorrectLevel.H //二维码容错level(默认为高)
});
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
qrcode.js会直接在给定的div下创建一个隐藏的canvas标签(用于二维码绘制)和一个img标签展示生成好的二维码,宽高就是设置的没有设置就是默认的,简单易懂。如果要是想用ES6的import,只需要在qrcode.js中添加一个行。
export {QRCode};
2. jr-qrcode
jr-qrcode是基于qrcode编写的一个库,那我为什么没直接用qrcode稍后介绍,jr-qrcode把字符串生成二维码,并以Base64 URL形式输出。 支持白色二维码,即反色二维码。用起来也很简单,如果看的不明白点击jr-qrcode可查看详细说明,他和第一种方式差别就是生成了一个base形式的src,直接可以让图片src指向它去展示。
安装
npm install jr-qrcode
用法
/** 导入方式 三种
<script type="text/javascript" src="dist/jr-qrcode.js"></script>
require('jr-qrcode');
var jrQrcode = require('jr-qrcode');
import jrQrcode from 'jr-qrcode'
*/
/**
@param: text: 要生成二维码的字符,支持中文
@param: options: {
padding : 10, // 二维码四边空白(默认为10px)
width : 256, // 二维码图片宽度(默认为256px)
height : 256, // 二维码图片高度(默认为256px)
correctLevel : QRErrorCorrectLevel.H, // 二维码容错level(默认为高)
reverse : false, // 反色二维码,二维码颜色为上层容器的背景颜色
background : "#ffffff", // 二维码背景颜色(默认白色)
foreground : "#000000" // 二维码颜色(默认黑色)
}
@return: 生成的二维码Base64 URL
*/
var imgBase64 = jrQrcode.getQrBase64(text, options);
3.qrcode
我在尝试安装qrcode时候遇到了一些问题,我使用命令安装以后,终端显示安装成功,但是在new QRCode()的时候报错,然后我去node_modules下查看并没有qrcode这个模块,然后看网上说有是有依赖,执行了一下brew install pkg-config cairo pango libpng jpeg giflib(mac系统)命令,在去安装还是一样,然后就放弃治疗了使用jr-qrcode,最后我在试着安装qrcode的时候竟然有了,有经验的可以留言讨论一下。
npm install --save qrcode
这个具体用法我就不介绍了,如果你安装上了就去README里面去看一下,详细介绍了每一种用法,假如你也找不到的话,你就使用前两种好了。qrcode返回的也是一个Base64的url。
最后贴上我测试三种方法的代码,测试时候要一个一个测试
<template>
<div>
<div ref="qrcodeUtil" style="width:100px; height:100px; margin-top:15px;"></div>
<div ref="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
<img ref="imgqrcode"></img>
</div>
</template>
<script>
import {QRCode} from '../../assets/js/qrcodeUtil'
import jrQrcode from 'jr-qrcode'
import QRCode from 'qrcode'
export default {
data (){
return{
}
},
mounted(){
this.qrcodeUtil();
this.qrcode();
var imgBase64 = jrQrcode.getQrBase64('https://www.baidu.com/',{
width: 100,
height: 100
});
this.$refs.imgqrcode.src = imgBase64;
},
methods:{
qrcodeUtil(){
var qrcode = new QRCode(this.$refs.qrcodeUtil, {
width : 100,
height : 100
});
qrcode.makeCode('');
},
qrcode(){
QRCode.toDataURL('hello world!不忘初心')
.then(url => {
console.log(url)
this.$refs.imgqrcode.src = url;
})
.catch(err => {
console.error(err)
})
}
}
}
</script>