记录一个前端生成二维码的插件jquery.qrcode.js(JS前端开发)
导读:
本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js,jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件,使用它可以很方便的在页面上生成二维码。
1、引入:将jquery.min.js和jquery.qrcode.min.js直接引入。
<script src="jquery.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
或CDN引入:
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
2、创建 DOM :创建一个 DOM 元素去包含生成 qr 码
<div id="qrcode"></div>
3、生成二维码:在此容器中的添加 qrcode。
<script>
jQuery(function(){
jQuery('#qrcode').qrcode("https://www.baidu.com/");
})
</script>
4、指定二维码的生成方式:
//使用table生成
jQuery('#qrcode').qrcode({
render: "table",
text: "https://www.23bei.com/"
});
//使用canvas生成
jQuery('#qrcode').qrcode({
render: "canvas",
text: "https://www.23bei.com/"
});
5、指定生成二维码的大小:
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
width: 100,
height: 100,
text: "https://www.baidu.com/"
});
6、指定生成二维码的色彩样式:
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
foreground: "#C00",
background: "#FFF",
text: "https://www.baidu.com/"
});
7、生成中文 ULR :
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码
相关推荐
记录一个合成图片插件html2canvas.js(JS前端开发)
本文记录一个前端开发中端常用的合成图片插件(html2canvas.js),在H5开发中,我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属。html2canvas.js就…
2022-05-23 20:29:09 | 分类:JS | 作者:myerob | 阅读:875 | 标签:合成 图片 插件 html2canvas.js JS 前端 开发 | 收藏
记录一个前端生成二维码的插件jquery.qrcode.js(JS前端开发)
本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js,jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件,使用它可以很方便的在页面…
2022-05-23 21:02:27 | 分类:JS | 作者:myerob | 阅读:238 | 标签:前端 二维码 插件 jqueryqrcode JS 前端 开发 | 收藏
javascript,JS怎么对url进行编码转换
项目中url遇到传参数传数组对象解析失败问题,采用转码方式解决,但并不清楚实际原理,研究了一下JS转码解码。Javascript语言用于编码的函数,一共有三个。escape()encodeURI()e…
2022-10-29 19:12:36 | 分类:JS | 作者:myerob | 阅读:311 | 标签:escape encodeURI encodeURIComponent | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:206 | 标签:jQuery nicescroll | 收藏