jquery生成二维码

Undefind_object

已于 2022-05-13 09:53:33 修改

阅读量3.3k

点赞数 1

分类专栏： Javasctipt 文章标签： jquery javascript 前端

于 2022-05-12 16:27:15 首次发布

本文链接：https://blog.csdn.net/chengjianghao/article/details/124734107

版权

Javasctipt 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用jQuery和相关库生成二维码，并详细讲解了生成二维码的步骤，包括引入必要的JS文件，设置二维码规格，以及如何将二维码保存为图片。示例代码展示了如何在网页上创建一个200x200像素，内容为'苦逼的程序员'的二维码，并提供了下载二维码图片的函数。

摘要由CSDN通过智能技术生成

链接：https://pan.baidu.com/s/1eqLblJ51Ja3m44gEhmutNQ
提取码：cjh6

步骤:
1. 引入Jquery文件
2. 引入jquery.qrcode.js文件
3. 引入支持中文的编码js文件 (utf.js)
4. 在网页中编写一个div 用于显示二维码

5. 准备二维码的规格对象(JSON)
var config = {
    width:数字,//值是number类型, 表示的单位是px 必须传递
    height:数字,//值是number类型, 表示的单位是px 必须传递
    text:“内容”,//text就表示二维码中存储的数据 必须传递
    correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0 可选参数
    background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
    foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
    render:“绘制模式”//取值:table/canvas , 默认table 可选参数
};

6. 通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码

$("#div1").qrcode(config);

示例

    <div id="qrcode"></div>
    <script>
        var config={
            width:200,
            height:200,
            text:"苦逼的程序员"
        }
        $("#qrcode").qrcode(config);
    </script>

下载图片需要获取画布

function download（）{
　　　var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值，并修改响应头部。
　　　var filename="tupian.png";//保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
 
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}