Canvas应用之多彩二维码:让扫码亮骚起来~

QR Code

常用的二维码生成方式有使用软件/在线固定生成,也有调用API动态生成。固定二维码不灵活,调用API会受限于网络和主机性能,既然如此不妨用“富客户端”的思想,将二维码的生成过程迁移到前端来,让性能足够强的客户端设备分担服务器的压力。

在一番搜索下香菇找到了一个叫做qrcode的使用javascript编写的二维码生成组件:https://github.com/aralejs/qrcode

阅读文档后了解到该模块支持<script>标签引用,暴露全局变量为AraleQRCode

实际上示例提到该组件支持默认tablecanvassvg四种方式绘制二维码,其中后三种支持添加中置logo图片,菇选择了最近在玩的canvas方式绘制,例:

<script src="/usr/themes/yodu/js/qrcode.js"></script>
<div id="erwei_qr"></div>
<script>
var qrnode = new AraleQRCode({
 render: 'canvas',  //绘制方式
 correctLevel: 0,   //容错级别:0 1 2 3
 text: '/canvas-colorful-qrcode.html',  //二维码内容
  size: 128,  //尺寸
  background: '#eeeeee',  //背景填充色
 foreground: '#667766',  //前景填充色
 pdground: '#FF7575',  //三个角标颜色
  image : '/usr/themes/yodu/img/qrlogo.png',  //中间logo地址
  imageSize : 28  //logo尺寸
});
document.getElementById('erwei_qr').appendChild(qrnode);
</script>

如上示例,内容、颜色、logo、尺寸等都可以结合后端脚本动态替换,十分方便,且绘制过程在加载js文件后完全由浏览器承担。本站文章下方二维码便是用此方式生成。嗯!真是太棒辣!(๑•̀ㅂ•́)و✧

标签: none

已有 14 条评论

  1. 这个香菇有点大_(:зゝ∠)_

    1. 嘎嘎嘎!大是一种态度。

      1. 再加个护眼模式/啪

        1. 咦?护眼模式是指神马@_@

          1. 绿草绿或者是baoqiang绿?/噗呲

  2. 你的这个博客为啥字都调的这么大, 适合老年人群的么?

    1. 因为…因为这样可以保护眼睛、专注阅读啊~嗯!就是这样!(香菇才不是老年人

  3. 够大 够清晰的主题

    1. 可在一米外无压力阅读(●ˇ∀ˇ●)

  4. 故事会 故事会

    不错的呢、、、、嘿嘿。。。

  5. 欧尼酱 欧尼酱

    亮骚起来~ (╯‵□′)╯︵┻━┻

评论已关闭