jQuery.qrcode绘制QR二维码

分类:技术文档 - 二维码 | 阅读(2014) | 发布于:2014-12-05 17:14

二维码是移动应用领域非常重要的一项技术, 可用在账号登录, App 下载, 好友关注等领域. 事实上, 二维码是一种以图片形式编码数据的方式, 在图片中包含了某些数据, 这些数据可以是一段文本, 一个URL等等. 既然二维码是一种图片, 那么你可以会想当然地使用 PHP 或者 Java 等语言生成二维码图片, 如果在 Web 应用中这么做, 你很可能就大错特错了! 因为, 图片处理是非常消耗 CPU 计算资源的, 这会给你带来很大的成本. 对于 Web 应用, 其实可以使用客户端(浏览器)技术来生成二维码图片, 也即使用 JavaScript 来生成二维码图片, 这样, 把计算分布到每一个用户的电脑上, 充分利用"分布式计算". jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单:
<div id="qrcodeCanvas"></div>
<script>
jQuery('#qrcodeCanvas').qrcode({
    width   : 150,
    height  : 150,
    text    : "http://www.lixiaocheng.cn/"
}); 
</script>
上面这段代码生成一张 300x300 的图片, 这张图片包含的信息便是我的博客的网址. 当你用微信或者新浪微博等 App 扫描时, 就可以打开我的博客了.
<script src="jquery-1.10.2.js"></script>
<script src="jquery.qrcode-0.11.0.js"></script>
<div id="qrcodeCanvas"></div>
<script>

jQuery('#qrcodeCanvas').qrcode({

    width   : 100,

    height  : 100,

    

    // content

    text    : "http://www.lixiaocheng.cn/",

    

    // render method: 'canvas', 'image' or 'div'

    render: 'canvas',

    // version range somewhere in 1 .. 40

    minVersion: 1,

    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'

    ecLevel: 'Q',

    // offset in pixel if drawn onto existing canvas

    left: 0,

    top: 0,

    // size in pixel

    size: 150,

    // code color or image element

    fill: '#852',

    // background color or image element, null for transparent background

    background: null,

    // corner radius relative to module width: 0.0 .. 0.5

    radius: 0,

    // quiet zone in modules

    quiet: 0,

    // modes

    // 0: normal

    // 1: label strip

    // 2: label box

    // 3: image strip

    // 4: image box

    mode: 0,

    mSize: 0.1,

    mPosX: 0.5,

    mPosY: 0.5,

    label: 'no label',

    fontname: 'sans',

    fontcolor: '#000',

    image: null

    

}); 

</script>



                

标签:二维码