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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
小程序外卖订单界面的示例代码
Dec 30 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
SVG描边动画
2017/02/23 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python返回昨天日期的方法
2015/05/13 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
简历中个人求职的自我评价模板
2013/11/29 职场文书
求职推荐信范文
2013/12/01 职场文书
主持人演讲稿范文
2013/12/28 职场文书
社区母亲节活动方案
2014/03/05 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
地震慰问信
2015/02/14 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书