美文网首页
生成二维码之 JavaScript (jquery-qrcode

生成二维码之 JavaScript (jquery-qrcode

作者: jnil | 来源:发表于2016-12-02 23:39 被阅读0次

本文讲述如何使用 jquery-qrcode 生成二维码

<!-- 引入 jQuery 与 jquery.qrcode-->
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<!-- 创建二维码父级元素 -->
<div id="qrcode"></div>
<div id="qrcode2"></div>
<script type="text/javascript">
    // 选中要生成二维码的元素节点, 调用 qrcode 方法, 传入数据即可
    $("#qrcode").qrcode("https://google.com");
    //qrcode        同时提供更多参数, 具体如下
    //render        绘制方式 canvas(绘制成一张图片) table(绘制成一个表格) 默认 canvas
    //width         二维码宽度  默认 256
    //height        二维码高度  默认 256
    //correctLevel  容错等级    1(L),0(M),3(Q),2(H)    1 最低, 2 最高  默认为 2
    //background    背景颜色    默认白色    #ffffff
    //foreground    前景颜色    默认黑色    #000000
    // 使用示例
    $("#qrcode2").qrcode({
        text: "https://google.com",
        render: "table",
        width: 300,
        height: 300,
        correctLevel: 3,
        background: "#eceadb",
        foreground: "#444"
    })
</script>

由于 qrcode 的编码原因会导致中文乱码
如果能确保二维码中的内容为 ** 链接 **, 那么在使用前对内容进行 encodeURI 编码即可

$("#qrcode").qrcode(encodeURI("https://google.com"));

如果不是链接, 需要对二维码内容进行编码, 方法来源于 http://justcoding.iteye.com/blog/2213034

function toUtf8(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;      
} 
$("#qrcode").qrcode(toUtf8("https://google.com"));

Java 生成二维码可参考 生成二维码之 Java(Google zxing) 篇

相关文章

  • 生成二维码之 JavaScript (jquery-qrcode

    本文讲述如何使用 jquery-qrcode 生成二维码 由于 qrcode 的编码原因会导致中文乱码如果能确保二...

  • js(jQ)生成二维码复制粘贴功能

    复制功能(兼容火狐IE9) 页面布局我就不写了,我知道你可以看得懂得。 生成二维码 jquery-qrcode最新...

  • 使用jquery-qrcode生成二维码

    qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以...

  • JavaScript QrCode

    一、简介: 使用JavaScript插件生成二维码,源码地址:https://github.com/jeromee...

  • 生成带 LOGO 的二维码

    通过 生成二维码之 Java (Google zxing) 篇 我们可以实现简单二维码的生成, 但是二维码显示却过...

  • golang如何生成与读取二维码

    golang如何生成与读取二维码 生成二维码 skip2/go-qrcode生成二维码 获取: 生成二维码图片: ...

  • 一键生成微信二维码

    引言 生成二维码的步骤导入CoreImage框架通过滤镜CIFilter生成二维码 生成普通的二维码 /** 生成...

  • iOS 二维码学习过程

    二维码生成 生成二维码需要导入CoreImage框架,通过滤镜CIFilter生成二维码。二维码的容错二维码都有一...

  • 在vue中使用qrcodeJs

    什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 ...

  • qrcodeJs生成二维码

    QRCode.js? QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM...

网友评论

      本文标题:生成二维码之 JavaScript (jquery-qrcode

      本文链接:https://www.haomeiwen.com/subject/vknqmttx.html