现在二维码是愈发流行,无论app、pc页面、小程序、公众号等平台几乎都能看见二维码的身影。下面将讲述前端生成二维码的几种方式。
文章目录
1、qrcode.js插件
官方网站:https://github.com/davidshimjs/qrcodejs
qrcode.js文件下载:qrcode.js
1.1 引入
<!-- 引入jquery扩展库 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!-- 引入js库,无需jquery库 -->
<script src="http://www.itxst.com/package/qrcodejs/qrcode.min.js"></script>
1.2 参数说明
-
引入jquery的情况
获取选择器:
var code = jQuery(“idName”); // 可以使用类名、ID名、标签名
生成二维码:
code.qrcode(url); // url 指代二维码指向的方向
-
引入单纯的js库
属性 描述 text 生成的二维码指向的url render 输出格式,支持svg、png width 二维码的宽度 height 二维码的高度 colorDark 方形框用于描绘二维码线条的颜色 colorLight 方形框中非二维码线条部分的颜色 correctLevel 纠错级别 纠错级别:表示二维码能被解析的范围,并不是说范围越低越好,越高越好;需要考虑实际的情况去设置。当二维码的受损几率很小时(固定的网页上)尽量使用减小的范围;受损几率较高时(打印在某物品上)则应该使用较大的范围
纠错级别 描述 L 最大 7% 的错误能够被纠正识别 M 最大 15% 的错误能够被纠正识别 Q 最大 25% 的错误能够被纠正识别 H 最大 30% 的错误能够被纠正识别
1.3 使用
-
引入jquery的情况
<body> <div id="qrcode"></div> <script> jQuery('#qrcode').qrcode("https://www.baidu.com"); </script> </body>
-
引入单纯的js库
<div id="qrcode"></div> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://www.baidu.com", render: "svg", width: 128, height: 128, colorDark : "red", colorLight : "#cccccc", correctLevel : QRCode.CorrectLevel.H });
2、vue-qrcode(参考)
官方网站:https://github.com/fengyuanchen/vue-qrcode
文件下载:http://img1.itxst.com/a/8/a8e55f727e373d50d828264f7e5337f5.zip
2.1 安装与引入
-
NPM方式
npm install @chenfengyuan/vue-qrcode --save
<template> <qrcode :value="'https://www.baidu.com'"></qrcode> </template> <script> import Vue from "vue" import VueQrcode from "@chenfengyuan/vue-qrcode"; //注册vue-qrcode组件 Vue.component(VueQrcode.name, VueQrcode); export default {} </script>
-
本地文件引入
<!-- 前提需要引入vue环境 --> <script src="./vue-qrcode.min.js"></script>
2.2 参数说明
value:二维码的指向内容
options参数 | 说明 |
---|---|
errorCorrectionLevel | 纠错级别(与qrcode相同) |
type | 渲染成的元素(支持png, svg, utf8默认png) |
margin | 间距(二维码内容距离边距的大小) |
width | 二维码宽度,由于是正方形,不需要高度 |
color | 颜色(子属性:dark——前景色;light——后景色) |
2.3 使用
<template>
<qrcode
value="https://www.baidu.com"
:options="options"
></qrcode>
</template>
<script>
import Vue from "vue"
import VueQrcode from "@chenfengyuan/vue-qrcode";
//注册vue-qrcode组件
Vue.component(VueQrcode.name, VueQrcode);
export default {
data(){
return {
options: {
errorCorrectionLevel: "L",
type: "image/png",
margin: 1,
width: 130,
color: {
dark: "#00ff00",
light: "#ebebeb"
}
}
}
}
}
</script>
3、qrcode.vue组件
3.1 安装与引入
-
npm方式
npm install qrcode.vue --save
<template> <qrcode-vue :value= "'https://www.baidu.com'" ></qrcode-vue> </template> <script> import qrcodeVue from 'qrcode.vue'; export defaule { components: { qrcodeVue, } } </script>
3.2 使用
<template>
<div class="qrcode">
<qrcode-vue
:value= "'https://www.baidu.com'"
:size= "130"
></qrcode-vue>
<br />
</div>
</template>
<script>
import qrcodeVue from 'qrcode.vue';
export defaule {
components: {
qrcodeVue,
}
}
</script>
3.3 下载生成的二维码
由于qrcode.vue组件是通过canvas标签实现的,可以将其下载保存在本地
<template>
<div class="qrcode">
<qrcode-vue
value= "https://www.baidu.com"
:size= "130"
></qrcode-vue>
<br />
</div>
</template>
<script>
import qrcodeVue from 'qrcode.vue';
export defaule {
components: {
qrcodeVue,
},
methods: {
handledown() {
//获取canvas标签
let canvas = document.getElementsByClassName('qrcode')[0].getElementsByTagName('canvas')
//创建a标签
let a = document.createElement('a')
//获取二维码的url并赋值地址为a.href
a.href = canvas[0].toDataURL('img/png')
//设置下载文件的名字
a.download = '二维码图片'
//点击事件,相当于下载
a.click()
},
}
</script>
PS. toDataURL方法用于将画布生成为图片:canvas API
HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的data URI。可以使用type参数表示其类型,默认为PNG格式。图片的分辨率为96dpi。
canvas.toDataURL(type , encoderOptions );
(Chrome支持 “image/webp”类型)
4、小程序
4.1 相应的API
wx.canvasToTempFilePath(Object object , Object this)
使用画布绘制出特定大小、规格的图片
通过获取该图片的 url 并使用 image 标签展示实现生成二维码
PS. 需要在 canvas 的 draw() 回调里调用该方法才能保证图片导出成功
4.2 API参数
object参数 | 说明 | 默认值 |
---|---|---|
x | 画布区域的左上角横坐标 | 0 |
y | 画布区域的左上角纵坐标 | 0 |
width | 画布区域的宽度 | canvas宽度 |
height | 画布区域的高度 | canvas高度 |
destWidth | 生成的图片宽度 | width*屏幕像素密度 |
destHeight | 生成的图片高度 | height*屏幕像素密度 |
canvasId | 画布的ID | |
success | 调用成功的回调函数(参数:res:tempFilePath——生成的文件的临时路径) | |
fail | 调用失败的回调函数 | |
complete | 调用完成的回调函数 |
4.3 使用
<template>
<canvas
canvas-id= "qrcode"
></canvas>
<image />
</template>
<script>
wepy.page({
data: {
},
methods: {
createImage(){
let obj = {
x: 0,
y: 0,
width: width,
height: width,
canvasId: "qrcode",
success: (res) => {
console.log(res.tempFilePath)
// 返回的 res 对象中存在 temFilePath (生成文件的临时路径(本地路径))
},
fail: (res) {
console.log('二维码生成失败 ', res)
}
}
wx.canvasToTempFilePath(obj) // 绘制
}
}
})
未完待续…
5、二维码扩展——带logo及背景(vue-qr)
官方网站:https://www.npmjs.com/package/vue-qr
本地下载:vue-qr
5.1 安装与引入
-
npm方式
npm insatll vue-qr --save
<template> <vue-qr :text= "'https://www.baidu.com'" ></vue-qr> </template> <script> //导入vue和vue-qrcode import Vue from "vue"; import VueQr from 'vue-qr'; //注册vue-qrcode组件 Vue.component(VueQr.name, VueQr); </script>
-
CDN方式
需要注意的是logo图片和二维码背景图片必须和网页在同一个域名下面否则会有跨域问题,只能生成二维码而无法显示图片和logo
<script src="http://www.itxst.com/package/vue/vue.min.js"></script> <script src="http://www.itxst.com/package/vue-qr/vue-qr.js"></script>
5.2 参数说明
参数 | 描述 |
---|---|
text | 二维码内容 |
correctLevel | 纠错级别0-3 |
size | 二维码宽高 |
margin | 二维码内容距离边距的大小 |
colorDark | 前景色,autoColor为true时无效 |
colorLight | 后景色,autoColor为true时无效 |
bgSrc | 二维码背景图 |
gifBgSrc | gif作为背景图 |
backgroundColor | 背景颜色 |
logoSrc | 二维码中间的logo的url地址 |
logoMargin | logo距离周边的位置,默认为0 |
logoBackgroundColor | 当logoMargin不为0时,空白区域的颜色 |
logoCornerRadius | logo的圆角大小,默认为0 |
whiteMargin | 是否绘制白边 |
dotScale | 二维码数据点的缩小比例,默认为0.35,如果背景图片不清晰可以缩小这个值 |
bindElement | 默认true,否需要自动将生成的二维码绑定到HTML上。 |
callback | 生成成功的回调函数,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid,因为是异步生成,所以需要用到qid |
autoColor | 是否把背景图片的主色作为数据点的颜色 |
binarize | 若为 true, 图像将被二值化处理 |
5.3 使用
<template>
<vue-qr
:text= "text"
:logoSrc= "logoSrc"
:colorDark= "colorDark"
:autoColor= "autoColor"
:size= "size"
></vue-qr>
</template>
<script>
//导入vue和vue-qrcode
import Vue from "vue";
import VueQr from 'vue-qr';
//注册vue-qrcode组件
Vue.component(VueQr.name, VueQr);
export default {
data(){
return {
text: 'https://www.baidu.com',
logoSrc: 'http://192.168.2.103:8080/bg0.png',
colorDark: '#00ff00',
autoColor: fale,
size: 120,
}
}
}
</script>
PS. vue.defineComponent is not a function
报错原因:插件的版本问题。可以通过修改版本 qrcode 的版本(亲测 1.7.0 可用)并重启项目解决问题。
6、解析二维码
使用插件qrcode-decoder做到解析二维码得到其中的数据。
- 安装
npm i qrcode-decoder -S # npm 方式
<!-- cdn -->
<script src="https://unpkg.com/qrcode-decoder"></script>
- 使用
文档上面写得很清楚了,就不多赘述了。
- 二维码转图片
// ...canvas 为绘制二维码标签对象,具体位置在浏览器可以查看
//创建a标签
let a = document.createElement("a");
//获取二维码的url并赋值地址为a.href
a.href = canvas.toDataURL("img/png");
//设置下载文件的名字
a.download = "二维码图片";
//点击事件,相当于下载
a.click();
- 异步获取的数据res中包含了当前图片的 base64 值、二维码的数据等。