jquery二维码生成插件jquery.qrcode.js

所属分类:其他-杂项

 375289  582  查看评论 (48)
分享到微信朋友圈
X
jquery二维码生成插件jquery.qrcode.js ie兼容9

如何使用它

将jquery.qrcode.min.js和jquery添加到您的网页中

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

然后创建一个DOM元素去包含生成qr码。

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

然后你在此容器中的添加qrcode

<script>
    jQuery(function(){
    jQuery('#qrcode').qrcode("http://www.jq22.com");
})
</script>

就这么简单,您想要的二维码就生成了。


感谢网友  提供的内容

进阶用法

指定二维码的生成方式:

可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。

//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "http://www.jq22.com"
});

//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "http://www.jq22.com"
});

指定生成二维码的大小:

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    width: 100,
    height: 100,
    text: "http://www.jq22.com"
});

指定生成二维码的色彩样式:

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    foreground: "#C00",
    background: "#FFF",
    text: "http://www.jq22.com"
});

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码
相关插件-杂项

ZeroClipboard插件复制到粘贴板

适用于bootstrap的跨浏览器的复制到粘贴板的插件
  杂项
 36375  318

日历签到领奖品

点击当日可进行签到领取礼物
  杂项
 47432  510

jQuery步骤条进度条插件setStep.js

一款简单额步骤条,可点击 也可按钮控制。
  杂项
 53884  377

vue.js实现增删改查(原创)

bootstrap布局,vue.js实现增删改查功能,模态框新增与编辑
  杂项
 36223  398

讨论这个项目(48)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

               听 0
    2020/5/7 15:44:09
    如何将后台传过来的值放入src参数中?
        九亿少女的梦0
        2020/5/14 9:24:35
        拼接在链接后面
    回复
    范爱兰 0
    2019/9/29 17:04:44
    手机端用h5写的是不是生成不了二维码? 回复
    里哩粒狸栗子壳 0
    2019/7/8 15:45:22
    您好可以调节纠错程度吗 默认生成的太密集了
        areyouOk0
        2019/7/8 16:18:01
        好像不可以,你的URL太长,所以生成的密。可以试试把长链接转换成短链接。
    回复
    迟早 0
    2019/5/24 10:05:24
    很棒,但是我引用后为啥没有显示出来内容呢;控制台也没有报错,求指教
        迟早0
        2019/5/24 10:24:26
        找到问题了,打扰了打扰了
    回复
    我、还在这 0
    2019/5/6 11:25:58
    手机端上点击不了??
        吕雪琴(捷瑞数字)0
        2020/2/18 11:19:43
        手机上需要识别二维码,可以将连接转为img二维码,手机不支持canvas识别。官方文档上写的
    回复
    Mr.Right 0
    2019/4/8 9:32:27
    生成二维码之后再微信中扫一扫显示网络错误是不是因为在本地的原因?
        西瓜0
        2019/4/19 1:07:08
        url地址错误问题
    回复
    ° 映天红っ 0
    2019/3/26 10:06:52
    二维码中间加照片的可以写个例子吗?
        西瓜0
        2019/3/26 10:12:45

        可以结合图片上传预览

        http://www.jq22.com/jquery-info4030

        将图片位置放到二维码中间即可。

    回复
    浮萍 0
    2019/2/11 17:07:09
    有回调函数吗? 回复
    Laurel 0
    2018/11/6 16:42:06
    长按不能识别二维码啊,怎么办???
        西瓜0
        2018/12/7 15:16:53
        这里是生成二维码,你说的不属于这个的功能。
    回复
    Laurel 0
    2018/8/6 16:34:19
    手机端长按没有弹出识别二维码 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复