当前位置:首页 > 技术博客 > JQuery > JQuery生成二维码

JQuery生成二维码

4年前 (2021-07-19)JQuery927

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

在使用之前我们需要先引入它,引入代码如下,前提是已经引入 jquery.min.js 文件。

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

然后只需要创建一个 DOM 元素,然后将需要生成二维码的参数通过 js 代码传入进去生成即可:

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

jquery渲染填充二维码

$('#qrcode').qrcode({
        render:"canvas",                      // 可切换为 table,默认 canvas(table一般在不支持canvas的时候使用)
        width: 100,                           // 宽度,单位 px
        height: 100,                          // 高度,单位 px
        foreground: "#1f1d2b",                // 二维码颜色
        background: "#ffffff",                // 背景颜色
        correctLevel: 0,                      // 纠错等级 0 1 2 3
        text: "https://www.liuzhixi.cn"       // 需要生产二维码的文本内容,如果是链接的话可以直接跳转
});

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


以下是中文字符的转码方法,如果不需要可以忽略!

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;
}

使用方法:utf16to8('内容')

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://cdn.liuzhixi.cn/html/128.html

标签: jQuery二维码

相关文章

jquery获取图片真实宽高

jquery获取图片真实宽高

jQuery有没有获取图片实际尺寸的方法? 就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸。$(function(){   &...

基于jQuery的拖拽效果

基于jQuery的拖拽效果

描述:基于jQuery实现的拖拽插件,简单好用<head>     <meta chars...

关注列表缩放滚动效果

关注列表缩放滚动效果

使用jQuery和css3制作响应式的关注列表上下垂直滚动效果,可动态添加数据,带关注按钮事件。修改data数组添加或删除数据即可实现。<head>...

jQuery仿百度搜索引擎

jQuery仿百度搜索引擎

静态搜索引擎,内置ajax动态查询默认参数:{     width: "200px",&...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。