基于canvas的JavaScript 二維碼生成工具——QRCanvas介紹亮點Github和demo安裝和使用瀏覽器兼容性React和Vue版本總結

發布時間：2023-07-03 12:44:45 作者：網友整理

介紹

在我們日常的開發中，特別是在現代的社會環境下，二維碼的應用可謂是豐富多彩，各種各樣讓人眼花繚亂的二維碼，可見二維碼已經滲透進我們生活的方方面面，也可以說目二維碼確確實實方便了我們的生活。因為作為開發人員，很多項目都會用到二維碼，最多的莫過于生成二維碼，而如今Web應用盛行，那么就有這樣一個二維碼生成的JAVAscript庫誕生了，它僅僅依賴與canvas，因此它支持大多數瀏覽器以及NodeJS！

PS：由于平臺限制本文不展示二維碼

亮點

QRCanvas原本是 jsqrgen，新版有幾個亮點

僅依賴canvas，兼容性好
簡單，僅僅是需要一些數據的配置
定制化功能豐富
支持Nodejs
方便在React和Vue中使用

Github和demo

github：

https://github.com/gera2ld/qrcanvas

demo:

https://gera2ld.github.io/qrcanvas/

在demo中你可以體驗它強大的擴展和自定義功能，包括文字、圖片、二維碼大小、Logo等等實用的功能

安裝和使用

一共介紹三種用法

安裝

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'));