本文共 1940 字,大约阅读时间需要 6 分钟。
昨夜突发奇想,想试一试在js前端生成二维码信息,大致的了解一些二维码的原理,有想了解可以点击看一下,今早就想试一下实际操作,感叹好多写博客的自己是不是都不尝试啊,顾自己总结自己实现的方式,希望可以帮到需要的同学。
1.简单粗暴()
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。,在应用中只需要引入qrcode.min.js就可以使用了,基本用法如下,当然还有一些参数可以设置。
//最基本的语法
//带参数var qrcode = new QRCode(document.getElementById("qrcode"), { text: "http://www.runoob.com",//要生成的信息 width: 128, height: 128, colorDark : "#000000", //二维码颜色(默认黑色) colorLight : "#ffffff", //二维码背景颜色(默认白色) correctLevel : QRCode.CorrectLevel.H //二维码容错level(默认为高)});qrcode.clear(); // 清除代码qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
qrcode.js会直接在给定的div下创建一个隐藏的canvas标签(用于二维码绘制)和一个img标签展示生成好的二维码,宽高就是设置的没有设置就是默认的,简单易懂。如果要是想用ES6的import,只需要在qrcode.js中添加一个行。
export {QRCode};
2. jr-qrcode
jr-qrcode是基于qrcode编写的一个库,那我为什么没直接用qrcode稍后介绍,jr-qrcode把字符串生成二维码,并以Base64 URL形式输出。 支持白色二维码,即反色二维码。用起来也很简单,如果看的不明白点击可查看详细说明,他和第一种方式差别就是生成了一个base形式的src,直接可以让图片src指向它去展示。
安装
npm install jr-qrcode
用法
/** 导入方式 三种require('jr-qrcode');var jrQrcode = require('jr-qrcode');import jrQrcode from 'jr-qrcode'*//**@param: text: 要生成二维码的字符,支持中文@param: options: { padding : 10, // 二维码四边空白(默认为10px) width : 256, // 二维码图片宽度(默认为256px) height : 256, // 二维码图片高度(默认为256px) correctLevel : QRErrorCorrectLevel.H, // 二维码容错level(默认为高) reverse : false, // 反色二维码,二维码颜色为上层容器的背景颜色 background : "#ffffff", // 二维码背景颜色(默认白色) foreground : "#000000" // 二维码颜色(默认黑色)}@return: 生成的二维码Base64 URL*/var imgBase64 = jrQrcode.getQrBase64(text, options);
3.qrcode
我在尝试安装qrcode时候遇到了一些问题,我使用命令安装以后,终端显示安装成功,但是在new QRCode()的时候报错,然后我去node_modules下查看并没有qrcode这个模块,然后看网上说有是有依赖,执行了一下brew install pkg-config cairo pango libpng jpeg giflib(mac系统)命令,在去安装还是一样,然后就放弃治疗了使用jr-qrcode,最后我在试着安装qrcode的时候竟然有了,有经验的可以留言讨论一下。
npm install --save qrcode
这个具体用法我就不介绍了,如果你安装上了就去README里面去看一下,详细介绍了每一种用法,假如你也找不到的话,你就使用前两种好了。qrcode返回的也是一个Base64的url。
最后贴上我测试三种方法的代码,测试时候要一个一个测试
转载地址:https://blog.csdn.net/weixin_38361925/article/details/83084929 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!