开发者社区> 磊哥聊Java> 正文

二维码的生成(可设置大小)以及插件下载地址

简介:   本文写的二维码生成是基于jQuery和jquery.qrcode.min.js插件的,本文将介绍两种方法和方式,仅供朋友选择和取舍。本文最下面附有插件的下载地址! 方式1:   基于jquery.qrcode.min.js插件生成,代码如下: 生成二维码 jQuery(function () { jQuery("#qrCodeDiv").qrcode("设置二维码的内容。
+关注继续查看

  本文写的二维码生成是基于jQuery和jquery.qrcode.min.js插件的,本文将介绍两种方法和方式,仅供朋友选择和取舍。本文最下面附有插件的下载地址!

方式1:

  基于jquery.qrcode.min.js插件生成,代码如下:

<html>
<head>
<title>生成二维码</title>
<meta name="author" content="Stone(at)游久网,Blog" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript">
jQuery(
function () {
jQuery(
"#qrCodeDiv").qrcode("设置二维码的内容。");
});
</script>
</head>
<body>
<div id="qrCodeDiv">
</div>
</body>
</html>

  优点:基于jquery.qrcode.min.js插件生成,稳定,效率比较高。

  缺点:不能设置和控制生成二维码的大小(笔者还没有找到)。

方式2:

  基于jquery.MyQRCode.js插件下载,代码如下:

<html>
<head>
<title>生成二维码</title>
<meta name="author" content="Stone(at)游久网,Blog" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.MyQRCode.js"></script>
<script type="text/javascript">
jQuery(
function () {
jQuery(
"#qrCodeDiv").MyQRCode(
{
content:
"设置二维码的内容。",
size:
"400x400"
});
});
</script>
</head>
<body>
<div id="qrCodeDiv">
</div>
</body>
</html>

  优点:可自定义自己设置大小。

  缺点:此二维码是基于https://chart.googleapis.com/chart?chs={size}&cht=qr&chl={content}&choe={encoding} 这个网址生成的,只是沟通js封装,依赖性很强。


至此二维码的生成就写完了,前辈们很友好把代码封装好了,只要遵循一定方法调用就是了,这也许就是互联网的精神,it的精神。


下载地址:

jquery-1.6.1.min.js

jquery.qrcode.min.js

jquery.MyQRCode.js


【Stone 制作整理,引用请写明出处谢谢合作,联系QQ:1370569】






img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
2 0
响应式 - 为CSS添加媒介查询
响应式 - 为CSS添加媒介查询
3 0
Win系统 - 该扩展程序并未列在Chrome应用商店中怎么样办?(上)
Win系统 - 该扩展程序并未列在Chrome应用商店中怎么样办?(上)
4 0
Win系统 - 该扩展程序并未列在Chrome应用商店中怎么样办?(下)
Win系统 - 该扩展程序并未列在Chrome应用商店中怎么样办?(下)
3 0
「后端小伙伴来学前端了」为什么Vue在有了全局事件总线后还要引入Vuex呢?
「后端小伙伴来学前端了」为什么Vue在有了全局事件总线后还要引入Vuex呢?
9 0
Vue.js - 引入外部 JS 文件
Vue.js - 引入外部 JS 文件
4 0
CSS - Flex(三)
CSS - Flex(三)
8 0
【SpringBoot2.x】-SpringBoot Web开发中Thymeleaf、Web、Tomcat以及Favicon
Web开发是开发中至关重要的一部分, Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC。更重要的是,Spring Boot``为web开发提供了快捷便利的方式进行开发,使用依赖jar:spring-boot-starter-web,提供了嵌入式服务器Tomcat以及Spring MVC的依赖,且自动配置web相关配置,可查看org.springframework.boot.autoconfigure.web。
5 0
Git - 简介之Git的诞生
Git - 简介之Git的诞生
3 0
Git - 创建版本库
Git - 创建版本库
4 0
+关注
磊哥聊Java
是非审之于己,毁誉听之于人,得失安之于数。欢迎关注我的公众号「Java中文社群」
762
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载