关于利用qrcode生成二维码的两种方式的区别

首先以下内容是查找网上资料后了解的利用qrcode.js生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http://www.helloweba.com/view-blog-226.html):

具体做的demo如下:

1、页面元素:地址输入框,canvas方式的显示div,table方式的显示div


2、引入jquery支持及jquery.qrcode支持,这两个都比较好找

3、js控制二维码生成

$(function(){
        //获得焦点时添加url协议头http://
        $("#urlIn").focus(function(){
            $("#urlIn").val("http://");
        });

        //输入框失去焦点时显示输入框值
        $("#urlIn").blur(function () {
            $("#canvas").empty();
            $("#table").empty();

            var url = $("#urlIn").val();
//            alert(url)
            //canvas方式生成二维码(二维码是一张图片)
            $("#canvas").qrcode(url);
            //table方式生成二维码(二维码是由标签的单元格填黑白框的方式形成)
            $("#table").qrcode({
                render: "table",
                width: 200,
                height: 200,
                text: url
            })
        })

    })


以上就是代码,实际效果如下:

关于利用qrcode生成二维码的两种方式的区别_第1张图片


说说两者的区别:看起来两者生成的二维码是一样的,移动设备扫码后验证有效。canvas方式只有一句代码,table则有各种设置相对代码多些。但实际生成的两个二维码并不相同。

通过页面元素审查我们能够发现,canvas方式生成的实际是一张图片,而table方式生成的则是由html的

标签通过控制细密的单元格背景色的黑白来组成的二维码,一个点就是一个单元格。canvas方式生成的可直接以图片格式保存,而table的不能。canvas的容易放大失真,table的不易失真。

实际应用就看需求了,只是需要显示name两者皆可,若需要利于保存,则canvas的较为方便。



你可能感兴趣的:(jQuery应用)