JavaScript实现的微信二维码图片生成器的示例


Posted in Javascript onOctober 26, 2016

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。

QRCode.js

QRCode.js是javascript实现二维码(QRCode)制作生成库。 QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5的 Canvas,低版本IE使用table元素绘制),而且QRCode.js没有任何依赖。只需要引用一个JS。

此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码,所以不会有图片下载的过程,能够实现快速生成。它是基于一个多语言的类库封装的,也不依赖于其他额外的服务。

注* 它也支持使用SVG绘制二维码

基本使用

注* 首先需要添加对qrcode.js的引用,并创建一个空DIV

<div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script>

还有更多参数可以选

var qrcode = new QRCode("test", {
 text: "http://jindo.dev.naver.com/collie",
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H
});

你可以动态地改变二维码图片,速度很快

qrcode.clear();
qrcode.makeCode("http://naver.com");

浏览器支持

几乎支持所有浏览器: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile.

DEMO地址: http://davidshimjs.github.io/qrcodejs

注* 这里有一个Server端使用Node.JS生成二维码图片的库,有兴趣的同学也可以研究一下: https://github.com/soldair/node-qrcode

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
JS实现复制功能
Mar 01 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
详解微信UnionID作用
May 15 Javascript
简单了解JavaScript异步
May 23 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 #Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 #Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
关于Jquery中的事件绑定总结
Oct 26 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
javascript实现评分功能
2020/06/24 Javascript
Python学习资料
2007/02/08 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python 爬虫的工具列表大全
2016/01/31 Python
django 类视图的使用方法详解
2019/07/24 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
三好学生自我鉴定
2013/12/17 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2015年团支部工作总结
2015/04/03 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏