描述： jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的，体积也比较                 小，使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码， 所以不会有图片下载的过程，能够实现快速生成。它是基于一个多语言的类库封装的，也不依赖于其他额外的服务。

好处：使用jquery-qrcode的好处，不需要在服务器端生成多余的二维码图片，二维码直接通过JavaScript直接在客户端生成，有效减少带宽，以及维护成本。

首先大家可以看一下jquery.qrcode.js官网，官网上也有例子。但是官网的 jquery.qrcode.js是不支持中文的，废话不多说了，现在我们开始吧。

官网上的 qrcode.js 文件里没有实现中文的支持和LOGO的添加，现在我们将这个文件修改为jquery.qrcode.js文件了。此外还需要一个对中文进行转码的文件，该文件为              utf.js。然后在 jquery.qrcode.js 文件中调用了 utf.js 文件的 utf16to8(str) 方法对其中文进行了转码。

下面是我写的一个示例，该示例需要的js文件有 jquery.qrcode.js  和 utf.js  以及 jquery-1.8.0.js 。还有一个 LOGO图片 可点击下载文件。

调用的jsp代码如下：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"

 2     pageEncoding="UTF-8"%>

 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 4 <html>

 5 <head>

 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 7 <title>该二维码支持中文和LOGO</title>

 8

 9 <script type="text/javascript" src="jquery-1.8.0.js"></script>

10 <script type="text/javascript" src="utf.js"></script>

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

12 <script type="text/javascript">

13     $(document).ready(function() {

14         $("#qrcodeCanvas").qrcode({

15             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好

16             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接

17             width : "200",               //二维码的宽度

18             height : "200",              //二维码的高度

19             background : "#ffffff",       //二维码的后景色

20             foreground : "#000000",        //二维码的前景色

21             src: 'photo.jpg'             //二维码中间的图片

22         });

23     });

24 </script>

25

26 </head>

27 <body>

28     <center>

29       <h2>该二维码支持中文和LOGO</h2>

30       <div id="qrcodeCanvas"></div>

31     </center>

32 </body>

33 </html>

js生成二维码 中间有logo的更多相关文章

  1. JS 生成二维码和加上logo图片

    参考链接:https://www.cnblogs.com/chiyi/p/5710324.html,http://www.jq22.com/jquery-info294 demo链接:demo查看 d ...

  2. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  3. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  4. php--------php库生成二维码和有logo的二维码

    php生成二维码和带有logo的二维码,上一篇博客讲的是js实现二维码:php--------使用js生成二维码. 今天写的这个小案例是使用php库生成二维码: 效果图:        使用了 php ...

  5. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  6. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  7. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  8. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  9. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

随机推荐

  1. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  2. Linux学习日记之磁盘与档案系统

    主要定义 磁盘的物理组成磁盘主要由圆形磁盘(多张).机械手臂.磁头等组成.每张磁盘都有不同的磁道,半径相同的磁道组成了磁柱,沿着中心划线可将磁盘分成若干扇区,每个扇区的大小是512Bytes. 磁盘分 ...

  3. 父元素相对定位后，子元素在ie下被覆盖的问题！

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  4. java安全管理器SecurityManager入门

    table { margin-left: 30px; width: 95%; border: 1px; border-collapse: collapse } img { border: 1px so ...

  5. Git版本控制管理学习笔记3-基本的Git概念

    为了更近一步的学习和理解Git的理念,这一节介绍一下Git中的一些基本概念. 基本概念 对象库图示 Git在工作时的概念 一.基本概念: 1.版本库:     Git的版本库就是一个简单的数据库,其中 ...

  6. AOJ 0033 Ball【DFS】

    有一个筒,从A口可以放球,放进去的球可通过挡板DE使其掉进B管或C管里,现有带1-10标号的球按给定顺序从A口放入,问是否有一种控制挡板的策略可以使B管和C管中的球从下往上标号递增. 输入: 第一行输 ...

  7. 2016-11-05实战-定义ssh服务的日志

    1.编辑/etc/rsyslog.conf 输入 local 0 .*     /var/log/sshd.log   #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...

  8. Spring的JDBC模板

    Spring对持久层技术支持 JDBC : org.springframework.jdbc.core.JdbcTemplate Hibernate3.0 : org.springframework. ...

  9. Python 学习第十八天 js 正则及其它前端知识

    一,js 正则表达式 test 判断制度串是否符合规定的正则 (1)定义正则表达式匹配规则         js 中定义正则表达式为rep=/\d+/,两个//之间为正则模式 (2)rep.test( ...

  10. android应用程序第一次启动时显示引导界面

    市面上好多优秀的应用(举例新浪微博.UC浏览器)都采用了欢迎页面与使用向导的方式给用户带来了良好的用户体验. 一般来说用户第一次安装应用或者安装了新版本后第一次进入应用都会显示成 欢迎页面-使用向导- ...