js生成二维码信息
发布日期:2021-09-12 09:57:45 浏览次数:21 分类:技术文章

本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Mac录制屏幕转GIF
下一篇:JS事件—unload、beforeunload

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年03月23日 11时01分16秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

docker mysql开机自启动_Docker学习4-学会如何让容器开机自启服务【坑】 2019-04-21
在mysql中删除表正确的是什么_在MySQL中删除表的操作教程 2019-04-21
mysql有3个共同好友_共同好友mysql 2019-04-21
代理查询 mysql_查询数据库代理设置 2019-04-21
mysql dif_mysqldiff实现MySQL数据表比较 2019-04-21
mysql 允许其他主机访问权限_允许其他主机访问本机MySQL 2019-04-21
druid不能close mysql连接_alibaba druid mysql连接问题 2019-04-21
mysql 设置按天分表_MySQL 优化实战记录 2019-04-21
java连接mysql 不推荐_java连接mysql 2019-04-21
mysql数据库 quota_shell脚本抓取用户存储quota写道mysql并展现到grafana面板 2019-04-21
idea测试连接mysql报错08001_IDEA连接MySQL错误 2019-04-21
layui导入模板数据_layui表格-template模板的三种用法 2019-04-21
mysql分组显示行号_mysql 显示行号,以及分组排序 2019-04-21
MySQL常见的主从复制架构_如何搭建经典的MySQL 主从复制架构 2019-04-21
编写python程序、计算账户余额_小明有20w存款存在余额宝中,按余额宝年收益为3.35%计算,用Python编写程序计算,多少年后小明的存款达到30w?... 2019-04-21
python 公众号引流_公众号引流方法有哪些? 2019-04-21
java 减少内存_java中减少内存占用小技巧 2019-04-21
centos 7 mysql图形界面_centos7-vnstat图形界面搭建 2019-04-21
java 防渗透_「java、工程师工作经验怎么写」-看准网 2019-04-21
java中跳出当前循环怎么做_在java中,如何跳出当前的多重循环? 2019-04-21