基于canvas的JavaScript 二维码生成工具——QRCanvas
介绍
在我们日常的开发中，特别是在现代的社会环境下，二维码的应用可谓是丰富多彩，各种各样让人眼花缭乱的二维码，可见二维码已经渗透进我们生活的方方面面，也可以说目二维码确确实实方便了我们的生活。因为作为开发人员，很多专案都会用到二维码，最多的莫过于生成二维码，而如今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、浏览器中使用
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
import { QRCanvas } from 'qrcanvas-vue';
export default {
components: {
QRCanvas,
},
data() {
return {
options: {
data: 'hello',
},
};
},
methods: {
onUpdated() {
console.log('updated');
},
},
};
或者在浏览器中
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'));
