jquery.qrcode.js 使用详解

jquery.qrcode.min.js 是一款基于 jquery 方便生成二维码图片的小插件。该插件兼容主流浏览器：IE9~11, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile。最近刚好使用到它，简单学习了下如何使用，这里简单记录一下，以便备查。

和所有 js 文件一样，在使用之前我们需要先引入它，引入代码如下，请自行确保已经引入 jquery.min.js 文件。

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

然后是一些具体的操作方法。

基础使用

一般情况下我们只需要创建一个 DOM 元素，然后将需要生成二维码的参数通过 js 代码传入进去生成即可：

创建 DOM 元素

<div id="qrcode"></div>

JS 生成二维码

<script>
jQuery(document).ready(function(){
    $('#qrcode').qrcode("https://blog.quietguoguo.com/");
});
</script>

注意：需要生成中文字符的二维码需要使用 encodeURI 对输入的文本参数进行转码。

高级操作

如果需要自定义调整二维码的生成方式，大小，颜色等信息可参考如下设置：

<script>
jQuery(document).ready(function(){
    $('#qrcode').qrcode({
        render:"canvas",                           // 可切换为 table，默认 canvas
        width: 100,                                // 宽度，单位 px
        height: 100,                               // 高度，单位 px
        foreground: "#f00",                        // 前景色
        background: "#fff",                        // 背景色
        correctLevel: 0,                           // 纠错等级 0 1 2 3
        text: "https://blog.quietguoguo.com/"      // 需要生产二维码的文本内容
    });
});
</script>