• UID30
  • 登录2016-10-11
  • 粉丝27
  • 关注104
  • 发帖50
  • 主页
  • 金币1032枚
原创写手
社区居民
忠实会员
追星一族
Kimi.Huang 发布于2015-08-27 18:42
1/5568

[前端开发]二维码(QRCode)

楼层直达
0、相关分享
本文是通过前端技术生成显示二维码,而直接通过后端技术同样可以生成二维码,请参见:[图片处理]二维码生成
1、二维码
二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。
后端接口是完全可以生成二维码的,而有时候,前端直接自己生成二维码,会大大减少流量传输,何乐而不为呢。
2、lrsjng.jquery-qrcode
通过使用 jQuery 实现图形渲染,画图。支持 canvas、image、div。
Github地址:https://github.com/lrsjng/jquery-qrcode
3、lrsjng.jquery-qrcode 使用
3.1、引入
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/lrsjng.jquery-qrcode/0.12.0/jquery.qrcode.min.js"></script>
3.2、HTML
<img id="qr_logo" src="./img/logo.png">
<div id="qr_tmp"></div>
3.3、JAVASCRIPT
$("#qr_tmp").empty().qrcode({
    render: 'canvas',
    mode: 4,
    image: $("#qr_logo")[0],
    text: 'http://finalshares.com/'
});
4、lrsjng.jquery-qrcode 截图

描述:二维码截图

图片:78AB9D4A-E583-4D06-A460-DC2A9E293643.png

二维码截图

5、参数说明
5.1、render
  • 二维码展示方式, 默认值 ‘canvas’,可选值:’canvas’, ‘image’ or ‘div’
5.2、mode
  • 二维码中心嵌入 文本 or Logo or 空着,默认值 0,可选值 0: normal, 1: label strip, 2: label box,3: image strip, 4: image box
5.3、image
5.3.1、前提
  • render 为 ‘canvas’ or ‘image’ —— 两者区别就是,最终二维码以何种方式展示,canvas or base64
  • mode 为 3: image strip or 4: image box
5.3.2、嵌入的 logo 的 img 对象 <img src="">
5.3.3、如果传 logo 的 url 并没有什么卵用,会直接报错出来
也许以后作者会更新支持传入url,那是后话
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
5.3.4、qr_logo 需要预先加载,否则在 qrcode 生成时 qr_logo 还未加载出来,则生成的 qrcode 上 logo 位置将是空白的,但不会报错
  • 因此可以考虑,将生成 qrcode 的代码放在 img 对象的 onload 回调中执行
5.3.5、当 render 为 canvas 时, img.src 可为 非同域
5.3.6、当 render 为 image 时, img.src 必须为 同域,否则会因为跨域的问题导致报错
  • file:/// 是会报错的
  • 启动: python -m SimpleHTTPServer 8000
  • 访问: http://127.0.0.1:8000/
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
5.4、text
  • 二维码文本,链接就放这里
6、生成二维码到指定img标签
  • 创建一个临时 div
&lt;div id="qr_tmp"&gt;&lt;/div&gt;
  • 通过 render = image 生成二维码
$("#qr_tmp").empty().qrcode({render: 'image', mode: 4, image: $(img_path)[0]});
  • 拷贝 img.src 到指定 img 标签
$(img_path).attr('src', $("#qr_tmp&gt;img").attr('src'));
  • 或者通过 render = canvas 生成二维码之后,调用 $("#qr_tmp>canvas")[0].toDataURL() 获取 base64,然后赋值给指定 img.src
7、 源码示例
qrcode.zip
7.1、运行方式
7.1.0、因为 5.3.6 的原因直接打开 qrcode.html 会直接报错
7.1.1、源码目录
目录 cd 到 qrcode.html 所在目录
7.1.2、启动 Server
python -m SimpleHTTPServer 8000
7.1.3、访问链接
http://127.0.0.1:8000/qrcode.html

本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com转载请保留此申明】

0人打赏
  • UID15
  • 登录2016-08-05
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1842枚
社区居民
喜欢达人
原创写手
janking 发布于2015-09-16 18:21
沙发F

图片:极分享水印.png

您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 66684/361   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 37600/190   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 34341/143   省时省力的Android组件群来了,非常棒的原型参考

  • 34082/249   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 33258/0   Python爬虫:常用浏览器的useragent

  • 27375/2   超全!整理常用的iOS第三方资源

  • 26392/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 25592/142   2016抢红包软件及源码

  • 21089/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 20795/25   Android工程师面试题大全

  • 20456/27   2016程序员跳槽全攻略

  • 20245/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 19638/155   Android版类似UC浏览器:非常赞,产品级的源码

  • 19463/20   码魂:程序员的牛B漫画

  • 17627/10   2016年最全的Android面试考题+答案 精编版

  • 17559/3   吐槽那些程序员的搞笑牛逼注释

  • 16558/42   一个绚丽的loading动效分析与实现!

  • 16556/1   iOS 动画总结

  • 16359/84   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 16351/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 15685/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 15339/23   个人收集的Android 各类功能源代码

  • 15318/10   女程序员的梦,众网友的神回复

  • 15078/11   年会上现场review代码是怎么样的体验!

  • 15070/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 14579/80   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 14451/23   珍藏多年的素材,灵感搜寻网站

  • 14419/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 14188/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 14037/98   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 13994/20   Android福利第三波【Android电子书】

  • 13552/75   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 13509/15   基于Android支付宝支付设计和开发方案

  • 13370/18   65条最常用正则表达式,你要的都在这里了

  • 13277/0   iOS中文版资源库,非常全

  • 12973/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12581/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 12383/7   一张图搞定iOS学习路线,非常全面

  • 12371/7   用程序员的姿势抢过年的火车票

  • 11964/10   成为Java顶尖程序员 ,看这11本书就够了

  • 11822/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 11697/18   一张图搞定Android学习路线,非常全面

  • 11604/10   微信支付终于成功了(安卓,iOS),在此分享

  • 11478/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 11477/0   GitHub iOS 库和框架Top100 

  • 11254/29   【持续更新中】Android福利贴(一):资料源码

  • 11070/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 10683/4   46 个非常有用的 PHP 代码片段

  • 10578/3   即时通信第三方库

  • 10267/8   流媒体视频直播方案

  • 10130/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10052/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10048/18   八个最优秀的Android Studio插件

  • 9842/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9791/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9268/6   开箱即用!Android四款系统架构工具

  • 9085/10   十大技巧快速提升Android应用开发性能

  • 9053/3   一张图看清Linux 内核运行原理

  • 9048/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8769/1   Android性能优化视频,文档以及工具

  • 返回顶部