H5案例分享:生成简易二维码

2017-01-06 H5案例分享 H5案例分享

 

生成简易二维码

   现在二维码越来越流行啦,支付扫二维码,关注扫二维码,抽奖扫二维码......,总之,二维码无处不在,那怎么制作一个二维码呢?我们今天就此问题一起来讨论一下

 

一、什么是二维码

   首先我们来了解一下,什么是二维码?百度百科上是这样解释的:二维条码/二维码(2-dimensional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理:它具有条码技术的一些共性:每种码制有其特定的字符集;每个字符占有一定的宽度;具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。 

 

二、具体实现

   那怎么来实现制作出一个二维码呢?有很多小伙伴是在服务器端生成二维码,作为前端控,小五今天就和大家磨叨一下怎么在前端生成二维码。其实小五还是走了捷径,采用了一个二维码插件jquery-qrcode,可以从https://github.com/jeromeetienne/jquery-qrcode 获取,这是一个免费开源的插件。qrcode.js 是实现二维码数据计算的核心类,jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)

 

1、支持的功能主要有:

text     : " / "  //设置二维码内容    
render   : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)   
width       : 256,     //设置宽度    
height      : 256,     //设置高度    
typeNumber  : -1,      //计算模式    
correctLevel    : 0,//纠错等级    
background      : "#ffffff",//背景颜色    
foreground      : "#000000" //前景颜色  

 

2、使用方式非常简单

需要引入jQuery 和 jquery.qrcode.js

①$('#qr_container').qrcode({render:"table",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});

 

②$('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});

 

   当你分别执行了上面的例子,就可以看到,二维码使用canvas画出来,在网页上输出一个canvas节点。但是用到table的话,我们会发现二维码实际是使用table表格把每一个二维码的点画出来,这就导致网页上的Dom元素会特别多。

 

   选择canvas,ie8一下的浏览器就没办法支持。选择table吧,一切看起来都很美好。但在实际使用的过程中,当二维码的内容较多时,二维码的尺寸较小时(比如120px * 120 px),用table来渲染,会发现生成的二维码很难识别。

 

   作为移动端开发者,现代的智能机基本上都支持canvas,那我们就用canvas吧,但是新的问题又来了,就是jquery.qrcode.js默认不支持中文

 

   这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

 

解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

function utf16to8(str) {  
    var out, i, len, c;  
    out = "";  
    len = str.length;  
    for(i = 0; i < len; i++) {  
    c = str.charCodeAt(i);  
    if ((c >= 0x0001) && (c <= 0x007F)) {  
        out += str.charAt(i);  
    } else if (c > 0x07FF) {  
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    } else {  
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    }  
    }  
    return out;  
}

 

   现在中文生成二维码解决了,但是!!!你生成的二维码在canvas里,怎么保存在本地呢?很简单,把canvas里的信息转换成img图片就行了

// 从canvas提取图片image   
 function convertCanvasToImage(canvas){
     //新Image对象,可以理解为DOM;
     var image = new Image();
     //canvas.toDataURL返回的是一串Base64编码的URL
     image.src = canvas.toDataURL("image/png");
     return image;
}

 

三、完整示例:

html:

<h1>生成简易二维码</h1>
<div>
    <label for="qr_text">URL:</label>      
    <input id="qr_text" type="text" value="/" style="width:200px;" /> 
    <button id="qr_btn" value="button">button</button> <br />
</div>
<div id="qr_container" style="margin:auto; position:relative;"></div>
<div id="imgDiv"></div>

 

 

js:

$(document).ready(function(){
    // 点击生成二维码
    $('#qr_btn').click(function(){  
        /*如果已生成过二维码,则删除二维码img图片和canvas,重新生成;反之,则直接生成二维码*/
        if($('#imgDiv:has(img)').length!=0){
            $('#imgDiv img').remove();
            $('canvas').remove();
            createQr();
        }else{
            createQr();
        }
    });
    // 生成二维码
    function createQr(){
        document.createElement('canvas').getContext('2d');
        var valText = $('#qr_text').val();

        // 采用正则表达式判断输入的内容是否是中文
        var reg=/^[\u0391-\uFFE5]+$/; 
         if(valText!=""&&!reg.test(valText)){ 
            // 如果不是中文,直接将输入的内容转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:valText});
         }else{
            // 如果是中文,直接将输入的内容字符串转换成UTF-8,然后再转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});
         }

        //获取网页中的canvas对象
        var mycanvas1=document.getElementsByTagName('canvas')[0];

        //将转换后的img标签插入到html中
        var img = convertCanvasToImage(mycanvas1);
        $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
    }

    // 字符编码
    function utf16to8(str) {  
        var out, i, len, c;  
        out = "";  
        len = str.length;  
        for(i = 0; i < len; i++) {  
        c = str.charCodeAt(i);  
        if ((c >= 0x0001) && (c <= 0x007F)) {  
            out += str.charAt(i);  
        } else if (c > 0x07FF) {  
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        } else {  
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        }  
        }  
        return out;  
    }

    //从canvas中提取图片image
    function convertCanvasToImage(canvas) {
        //新Image对象,可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
});

 

DEMO演示:

 


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

H5案例分享:图片合成

H5案例分享:CreateJs-EaselJS精灵Sprite类和简明动画2

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~


微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~