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 中令人困惑的变量赋值
Aug 13 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js事件(Event)知识整理
Oct 11 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python实现快速排序的方法详解
2019/10/25 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
心得体会怎么写
2013/12/30 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
学生评语集锦
2015/01/04 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis