介紹

在我們?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、瀏覽器中使用

---

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

---

---

或者在瀏覽器中

---

---

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(, document.getElementById('app'));

---

---

總結(jié)

QRCanvas是一個(gè)優(yōu)秀的Web和Nodejs二維碼生成插件，在Web開發(fā)中可以得到廣泛的使用，其可定制性滿足了很多人的需求，二維碼也可以有個(gè)性。其簡單而不簡單的特點(diǎn)，我相信符合大多數(shù)人的期望，再此分享給大家，很多實(shí)用的開源項(xiàng)目可以查看以往的文章，希望對你有所幫助！

總結(jié)

以上是生活随笔為你收集整理的canvas 插件_基于canvas的JavaScript 二维码生成工具——QRCanvas的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。