通过Google Chart API生成QR code

QR code ,Quick Response code,是一种流行的2维条形码,能够存储多达4296个字母数字字符的任意文本,对于汉字,做多存储1817个,相对于177x177这么小一块区域来说容量已经相当高,更重要的是读取速度——准确而高效,因而在各个领域都有非常广泛的应该。导致现在手机读取条码软件也是相当流行。

Google Chart API 里就有专门的 QR code 生成调用 ,能非常方便的获取自己想要的 QR code。配图的内容为 swordair.com,长宽为150px,由google生成,看起来还挺不错挺蛋疼的。 如果只是随便玩一下,网络上也有在线的QR code 生成工具,使用起来更加便捷。

问题在于,我们拿着这幅自己完全看不懂的图做什么?用来写情书吗?恐怕是个不错的主意,绕这么多圈子想不收卡都难了,哈哈。

难得闲来无事,对此API我就简单封装了一个QRcode.js,方便日常使用。好吧,我常常写情书,而且一写就停不下来:)

当然,卡也就没少收了...

/**
 * generate QR Code images using Google Chart API
 * developed by iifksp@swordair.com
 * http://www.swordair.com
 * api docs: http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html
 */
var QRcode = function (config) {  
    this.cfg = {
        container_id : '',
        /* The data to encode,  2K maximum length */
        data : '',
        /* Image size, QRcode is a square */
        size : 150,
        /* Error Correction Level
        L - [Default] Allows recovery of up to 7% data loss
        M - Allows recovery of up to 15% data loss
        Q - Allows recovery of up to 25% data loss
        H - Allows recovery of up to 30% data loss */
        ec_level : 'L',
        /* The width of the white border around the data portion of the chart.
        This is in rows, not in pixels. */
        margin : 4,
        /* How to encode the data in the chart */
        encode : 'UTF-8'
    }

    this.init(config);

    this.api_url = 'http://chart.apis.google.com/chart';
    this.param = {
        cht : 'qr',
        chs : this.cfg.size + 'x' + this.cfg.size,
        chl : encodeURIComponent(this.cfg.data),
        choe : this.cfg.encode,
        chld : this.cfg.ec_level + '|' + this.cfg.margin
    }

    this.qrcode_img_src = '';
    this.generateQRcode();
};

QRcode.prototype = {

    init : function (config) {
        for(var opt in config){
            this.cfg[opt] = config[opt];
        }
    },

    generateQRcode : function () {
        if(this.cfg.data == ''){
            return;
        }else{
            this.qrcode_img_src = this.api_url + '?' + this.joinParam();
        }
    },

    display : function (id) {
        var container_id = id ? id : this.cfg.container_id;
        if(container_id == '' ||
        !document.getElementById(container_id)){
            return;
        }else{
            var container = document.getElementById(container_id);
            var img = document.createElement('img');
            img.src = this.qrcode_img_src;
            container.appendChild(img);
        }
    },

    joinParam : function(){
        var quary = [];
        for(var opt in this.param){
            quary.push(opt + '=' + this.param[opt]);
        }
        return quary.join('&');
    }
};

使用上就是简单的实例化和显示,时间挺仓促,可能还有不完备的地方,以后再继续改进。

var qrcode = new QRcode({  
    size : 150,
    data : 'swordair.com',
    container_id : 'container'
});
qrcode.display('other_container');  

评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。