HTML5+Jquery生成二维码支持移动端APP和网站

来源:程序思维浏览:545次

在移动端越来越流行的今天,在PC上做好之后经常会放置一个二维码引导用户到移动端上体验移动版的版本。

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

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

如果你需要兼容IE等不支持canvas的浏览器的话,那你需要使用div格式的。先来个案例感受一下这个插件的魅力:

演示如何使用

只需要添加下面这个简单的语法就行了。

$(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'
});


代码下载地址:https://pan.baidu.com/s/1BHETZ4t5lQxxSXvgEZ8r9A
精品好课
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
最新React视频教程从入门到实战附源码下载
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
收藏