zoukankan      html  css  js  c++  java
  • js生成二维码 中间有logo

     

     

      描述: 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>
    复制代码
    复制代码
  • 相关阅读:
    关系型数据库——主键&外键的
    JSON运用——PHP中使用json数据格式定义字面量对象的方法
    JSON.parse与eval的区别
    css中那些属性可以被继承
    js笔记 -- toString() 和String()
    MYSQL IFNULL函数的使用
    mysql临时表产生的执行效率问题改进(转)
    mysql中concat 和 group_concat()的用法
    转载mysql数据库配置优化
    浅谈MySql的存储引擎(转)
  • 原文地址:https://www.cnblogs.com/gopark/p/9597329.html
Copyright © 2011-2022 走看看