描述： 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. 3ds max录制自定义视频

    要将视频设置成未压缩才能录制出自己设定的大小,其他都是都是特定的,软件默认的一些参数.

  2. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  3. javaScript里的原型链

    原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的( ...

  4. Linux时间同步，ntpdate命令、ntpd服务详解

    声明:以下内容来自网友整理(http://blog.sina.com.cn/s/blog_636a55070101u1mg.html),为便于以后学习暂时收录,请不要随意转载 Linux默认情况下,系 ...

  5. Scrapy 爬虫 使用指南 完全教程

    scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name 的Scrapy项目. scrapy sta ...

  6. 【HTML5】 web上的音频

    <!-- audio通过属性的设置可以控制音频播放的行为: 表6-2 audio元素的属性 ——————————————————————————————————————————————————— ...

  7. C++ 系列：socket 资料收集

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  8. haproxy+keepalived

    global_defs { router_id LVS_DEVEL } vrrp_script chk_haproxy { script "killall -0 haproxy" ...

  9. 比较完整的WebView的用法

    WebView, WebChromeClient和WebViewClient加载网页基本用法 webview是android中的浏览器控件,在一些手机应用中常会用到b/s模式去开发应用,这时webvi ...

  10. 在Axure中使用iconfonts

    转载:http://gabriel-t.lofter.com/post/2ee8fc_12c3b4b https://icomoon.io/app/#/select