jQuery.qrcode二维码插件生成网页二维码

来源:互联网 发布:ipad好玩软件推荐 编辑:程序博客网 时间:2024/04/26 15:36

如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。

本文推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有Canvas格式的。canvas的支持自定义logo和文字在上面。

如何使用

$(selector).qrcode(options);

将一个新生成的HTML元素添加到所选元素的QR代码中。如果所选元素已是画布元素,那么QR代码将绘制到它上面。

选项

{    // 渲染方式: 'canvas', 'image' or 'div'    render: 'canvas',    // 版本范围在 1 .. 40    minVersion: 1,    maxVersion: 40,    // 误差校正水平: 'L', 'M', 'Q' or 'H'    ecLevel: 'L',    // 如果绘制到现有画布上的像素偏移    left: 0,    top: 0,    // 尺寸(使用像素)    size: 200,    // 代码颜色或图像元素    fill: '#000',    // 背景颜色或图像元素,null则代表透明背景    background: null,    // 内容    text: 'no text',    // 相对于模块宽度的角半径: 0.0 .. 0.5    radius: 0,    // 模块中安静的区域    quiet: 0,    // 模式    // 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}

实例:

1.假如我要生成本页的二维码,支持IE浏览器,二维码大小为200x200.背景为白色,图像颜色为#1C1C1C,则可以使用这个代码:

var url = window.location.href || 'http://caibaojian.com';$('#wx_qrcode').qrcode({    size:200,    render: "div",    fill: '#1C1C1C',    text: url});

2.假如我要生成跟开始给的演示中一样的二维码,那我只能选择canvas或者image了。

//第二个var url2 = 'http://caibaojian.com';$('#canvas').qrcode({    size:200,    fill: '#1C1C1C',    text: url2,    ecLevel:'H',//误差校正水平选择最高级    mode:2,//label模式选择2    label: 'caibaojian.com',    fontname: 'Arial',    fontcolor: '#458fd2'});

原文地址:

http://caibaojian.com/jquery-qrcode.html