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 继承详解(三)
Jul 13 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
常用的9个JavaScript图表库详解
Dec 19 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学习之数组值的操作
2011/04/17 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
大学运动会入场词
2014/02/22 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android