介紹
在我們?nèi)粘５拈_發(fā)中，特別是在現(xiàn)代的社會環(huán)境下，二維碼的應(yīng)用可謂是豐富多彩，各種各樣讓人眼花繚亂的二維碼，可見二維碼已經(jīng)滲透進(jìn)我們生活的方方面面，也可以說目二維碼確確實(shí)實(shí)方便了我們的生活。因?yàn)樽鳛殚_發(fā)人員，很多項(xiàng)目都會用到二維碼，最多的莫過于生成二維碼，而如今Web應(yīng)用盛行，那么就有這樣一個(gè)二維碼生成的JAVAscript庫誕生了，它僅僅依賴與canvas，因此它支持大多數(shù)瀏覽器以及NodeJS！
PS：由于平臺限制本文不展示二維碼
亮點(diǎn)
QRCanvas原本是 jsqrgen，新版有幾個(gè)亮點(diǎn)
- 僅依賴canvas，兼容性好
- 簡單，僅僅是需要一些數(shù)據(jù)的配置
- 定制化功能豐富
- 支持Nodejs
- 方便在React和Vue中使用
Github和demo
github：
https://github.com/gera2ld/qrcanvas
demo:
https://gera2ld.github.io/qrcanvas/
在demo中你可以體驗(yàn)它強(qiáng)大的擴(kuò)展和自定義功能，包括文字、圖片、二維碼大小、Logo等等實(shí)用的功能
安裝和使用
一共介紹三種用法
- 安裝
npm install qrcanvas //或者 yarn add qrcanvas
- 用法
1、es6的模塊化用法
import { qrcanvas } from 'qrcanvas';
2、瀏覽器中使用
<div id="qrcode"></div> <script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>
const canvas = qrcanvas.qrcanvas({
data: 'hello, world'
});
document.getElementById('qrcode').AppendChild(canvas);
3、在NodeJS中使用
const fs = require('fs');
const { qrcanvas } = require('qrcanvas/lib/qrcanvas.node.js');
const canvas = qrcanvas({
data: 'hello, world'
});
// canvas is an instance of `node-canvas`
canvas.pngStream().pipe(fs.createWriteStream('qrcode.png'));
瀏覽器兼容性
支持所有主流的瀏覽器
React和Vue版本
- Vue版本
Github：
https://github.com/gera2ld/qrcanvas-vue
Demo：
https://gera2ld.github.io/qrcanvas-vue/
npm install qrcanvas-vue //或者 yarn add qrcanvas-vue
<template>
<QRCanvas :options="options" @updated="onUpdated" />
</template>
<script>
import { QRCanvas } from 'qrcanvas-vue';
export default {
components: {
QRCanvas,
},
data() {
return {
options: {
data: 'hello',
},
};
},
methods: {
onUpdated() {
console.log('updated');
},
},
};
</script>
或者在瀏覽器中
<script src="https://cdn.jsdelivr.net/combine/npm/qrcanvas@3,npm/qrcanvas-vue@2"></script> <div id="root"> <qr-canvas :options="options" @updated="onUpdated"></qr-canvas> </div>
const { QRCanvas: QrCanvas } = qrcanvas.vue;
new Vue({
components: {
QrCanvas, // QrCanvas <-> qr-canvas
},
data: {
options: {
data: 'hello',
},
},
methods: {
onUpdated() {
console.log('updated');
},
},
})
.$mount('#root');
- React版本
Github：
https://github.com/gera2ld/qrcanvas-react
Demo：
https://gera2ld.github.io/qrcanvas-react/
npm install qrcanvas-react //或者 yarn add qrcanvas-react
import { QRCanvas } from 'qrcanvas-react';
import ReactDOM from 'react-dom';
const options = { data: 'hello, world' };
ReactDOM.render(<QRCanvas options={options} />, document.getElementById('app'));
總結(jié)
QRCanvas是一個(gè)優(yōu)秀的Web和Nodejs二維碼生成插件，在Web開發(fā)中可以得到廣泛的使用，其可定制性滿足了很多人的需求，二維碼也可以有個(gè)性。其簡單而不簡單的特點(diǎn)，我相信符合大多數(shù)人的期望，再此分享給大家，很多實(shí)用的開源項(xiàng)目可以查看以往的文章，希望對你有所幫助！
