您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

基于canvas的JavaScript 二维码生成工具——QRCanvas

时间:2020-07-27 11:43:20  来源:  作者:

介绍

在我们日常的开发中,特别是在现代的社会环境下,二维码的应用可谓是丰富多彩,各种各样让人眼花缭乱的二维码,可见二维码已经渗透进我们生活的方方面面,也可以说目二维码确确实实方便了我们的生活。因为作为开发人员,很多项目都会用到二维码,最多的莫过于生成二维码,而如今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'));

浏览器兼容性

支持所有主流的浏览器


基于canvas的JavaScript 二维码生成工具——QRCanvas

 


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


总结

QRCanvas是一个优秀的Web和Nodejs二维码生成插件,在Web开发中可以得到广泛的使用,其可定制性满足了很多人的需求,二维码也可以有个性。其简单而不简单的特点,我相信符合大多数人的期望,再此分享给大家,很多实用的开源项目可以查看以往的文章,希望对你有所帮助!



Tags:二维码生成 QRCanvas   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
介绍在我们日常的开发中,特别是在现代的社会环境下,二维码的应用可谓是丰富多彩,各种各样让人眼花缭乱的二维码,可见二维码已经渗透进我们生活的方方面面,也可以说目二维码确确实...【详细内容】
2020-07-27  Tags: 二维码生成 QRCanvas  点击:(66)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条