jquery.qrcode.js生成矩阵二维码QRCode - js笔记

可以参考下这个教程,教你如何使用jquery.qrcode.js生成矩阵二维码QRCode

如果你的网页使用了jquery的话,可以参考下这个教程,教你如何使用jquery.qrcode.js生成矩阵二维码QRCode。然而,本教程还未进行验证。

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

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

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

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

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

<script>
    jQuery(function(){
    jQuery('#qrcode').qrcode("https://www.npc.ink");
})
</script>

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

更多:

指定二维码的生成方式:

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

//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "https://www.npc.ink"
});
 
//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "https://www.npc.ink"
});

指定生成二维码的大小:

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

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

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

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

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

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

展示当前页二维码

当前页地址:

当前页二维码:

如果您不需要使用插件的话,可以看看这个原生方法:

jquery.qrcode.js生成矩阵二维码QRCode  - js笔记-Npcink
jquery.qrcode.js生成矩阵二维码QRCode  - js笔记-Npcink

QRCode.js - 用于JavaScript的跨浏览器QRCode生成器

相关接口

使用方法

https://api.pwmqr.com/qrcode/create/?url=二维码信息

例子:

<img src="https://api.pwmqr.com/qrcode/create/?url=https://www.npc.ink/15513.html"/>

效果:

jquery.qrcode.js生成矩阵二维码QRCode  - js笔记-Npcink

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
js

怎么使用javaScript获取div的内容? - js笔记

2020-4-23 11:09:10

js

JS实现动态打字效果 - js笔记

2020-4-26 23:49:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索