文档章节

用纯JavaScript实现的微信二维码图片生成器

COLIN前端
 COLIN前端
发布于 2015/11/23 13:52
字数 323
阅读 7248
收藏 359

注* 之前的二给码分享功能大多是由后端实现的,对服务器的负载较重,这里有一个前端实现的版本,而且性能还可以。

QRCode.js

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

注* 它也支持使用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

© 著作权归作者所有

COLIN前端
粉丝 8
博文 6
码字总数 8602
作品 0
福州
私信 提问
加载中

评论(20)

老张大哥
老张大哥
还是不错的,不是所有人都知道!人家只是记录自己的学习,你们这些人啊,你有本事自己写一个,也被推荐啊!
南漂一卒
南漂一卒

引用来自“Honghe”的评论

引用来自“webit”的评论

标题 不应该带 “微信”
是的。 同时生成的二维中间能否加图标 @colinfed?

有 canvas 就自己贴图,没有就用浮层模拟~
asdtiang
asdtiang
早就用上了,这也发
9
931070318
good
loyal
loyal
如果只是生成一个网址什么的到可以用...
如果是其他,那就算了吧.bug满天飞
我是李达康
我是李达康
有过类似的了 重复做轮子了
啦啦啦拉拉
啦啦啦拉拉

引用来自“小薇”的评论

这也能推荐?

微信等同二维码
风城剑客
风城剑客
这个NB坏了
Honghe
Honghe

引用来自“webit”的评论

标题 不应该带 “微信”
是的。 同时生成的二维中间能否加图标 @colinfed?
要吃九个橙子
要吃九个橙子

引用来自“ProgramCat”的评论

支持ie6?
什么样的公司现在还要支持IE系列啊 。
结合WebSocket,实现远程二维码生成应用

在上一篇文章中介绍了通过WebSocket实现服务端和客户端的图像传输。基于这个实现,可以把二维码生成器放在服务端,轻松实现远程解决方案。 参考原文: Barcode Generator with HTML5 WebSock...

yushulx
2014/06/24
262
0
微信开放微信内网页开发工具包,助力网页开发

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

oschina
2015/01/10
26.6K
30
微信开放JS-SDK,助力网页开发[转自微信官方]

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

明非_
2014/07/26
7.2K
14
VSP LASO 项目支持http https协议访问

VSP lASO 1替换 http://api.map.baidu.com/api=》 //api.map.baidu.com/api 2替换 TextIconOverlay_min.js 将该引用的js 下载本地再引入 百度对该资源的cdn不再支持 或者支持不好 经常访问不...

mircle
2017/06/30
2
0
javascript统一世界?

[到微信关注我][1]今天facebook将react native框架的源码开源,瞬间火得一塌糊涂,目前github上的star已经快7000了。javascript作为这个框架的开发使用语言又一次出现在人们面前。这几年jav...

卢勇福
2015/03/28
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

如何编写高质量的 JS 函数(1) -- 敲山震虎篇

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ 作者:杨昆 一千个读者,有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函...

vivo互联网技术
42分钟前
5
0
学会这5个Excel技巧,让你拒绝加班

在网上,随处都可以看到Excel技巧,估计已看腻了吧?但下面5个Excel技巧会让你相见恨晚。关键的是它们个个还很实用 图一 技巧1:快速删除边框 有时当我们处理数据需要去掉边框,按Ctrl+Shif...

干货趣分享
今天
11
0
JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
9
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
15
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
3.3K
25

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部