描述： 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. 配置Samba共享服务器

    安装samba: sudo apt-get install samba samba-common 由于是挂载另一个磁盘,并作为共享文件存放地: 列出磁盘名和ID air@air-device:~$ s ...

  2. (转)Redis 的 5 个常见使用场景

    在这篇文章中,我们将阐述 Redis 最常用的使用场景,以及那些影响我们选择的不同特性. 1.会话缓存(Session Cache) 最常用的一种使用Redis的情景是会话缓存(session cac ...

  3. PHP socket上传文件图片

    最近了解了下下socket方面的东西,想做一个socket上传文件的例子. 在网上搜了搜代码执行后,图片数据传输了一半,图片的下半部分是灰色的.然后就自己仿着搜来的代码和php.net 中socket ...

  4. 【Java EE 学习 73】【数据采集系统第五天】【参与调查】【导航处理】【答案回显】【保存答案】

    一.参与调查的流程 单击导航栏上的“参与调查”按钮->EntrySurveyAction做出相应,找到所有的Survey对象并转发到显示所有survey对象的页面上供用户选择->用户单击其 ...

  5. c语言快速入门1

    如果你想快速入门计算机,可以参考我的上一篇帖子,先了解一些必备的软知识,然后再来进行语言的快速入门 计算机入门基础知识 目录 1.1.1    计算机与程序 现代计算机可以自动完成计算任务 程序就是按 ...

  6. Hibernate jpa 在实体类中对于时间的注解

    在时间类型DATE 属性上添加一个 @Temporal(TemporalType.DATE)(精确到年月日)@Temporal(TemporalType.TIME)(精确到时分秒)@Temporal( ...

  7. httpclient 无信任证书使用https

    1.当不需要使用任何证书访问https网页时,只需配置信任任何证书 HttpClient http = new HttpClient(); String url = "https://pay ...

  8. .NET开发人员必看：提高ASP.NET Web应用性能的24种方法和技巧

    那性能问题到底该如何解决?以下是应用系统发布前,作为 .NET 开发人员需要检查的点. 1.debug=「false」 当创建 ASP.NET Web应用程序,默认设置为「true」.开发过程中,设置 ...

  9. OSG 3D场景渲染编程概述

    OSG是Open Scene Graphic的缩写,是基于C++平台的使用OpenGL技术的开源3D场景开发. vs环境安装或者是在Ubuntu中环境的安装网上教程很多,都是大同小异的,认真操作容易成 ...

  10. Linux内核笔记——内存管理之块内存分配

    内核版本:linux-2.6.11 伙伴系统 伙伴系统是linux用于满足对不同大小块物理内存分配和释放请求的解决方案. 内存管理区 linux将物理内存分成三个内存管理区,分别为ZONE_DMA Z ...