search

Home >Web Front-end >JS Tutorial >How to use jquery to generate a QR code with a logo in the middle? (with code)

How to use jquery to generate a QR code with a logo in the middle? (with code)

yulia
yuliaOriginal
2018-09-13 16:34:012237browse

jquery.qrcode.js is a jquery plug-in that can generate matrix QR code QRCode on the client. It can be used to easily generate 2D barcodes on the page. This plug-in can be used independently and is relatively small in size, less than 4kb after gzip compression. Because it is a barcode generated directly on the client, there is no image downloading process and it can be generated quickly. It is encapsulated based on a multi-language class library and does not rely on other additional services.

Benefits: The benefit of using jquery-qrcode is that there is no need to generate redundant QR code images on the server side. The QR code is directly generated on the client side through JavaScript, effectively reducing bandwidth and maintenance costs.

First of all, you can take a look at the jquery.qrcode.js official website. There are also examples on the official website. However, jquery.qrcode.js on the official website does not support Chinese. Without further ado, let’s get started now. The qrcode.js file on the official website does not implement Chinese support and the addition of LOGO. Now we have modified this file to jquery.qrcode.js file. In addition, a file for transcoding Chinese is also needed, which is utf.js. Then the utf16to8(str) method of the utf.js file is called in the jquery.qrcode.js file to transcode the Chinese.

The following is an example I wrote. The js files required for this example are jquery.qrcode.js and utf.js as well as jquery-1.8.0.js. There is also a LOGO picture that can be clicked to download. The called jsp code is as follows: 

  <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>该二维码支持中文和LOGO</title>
  
  <script type="text/javascript" src="jquery-1.8.0.js"></script>
 <script type="text/javascript" src="utf.js"></script>
 <script type="text/javascript" src="jquery.qrcode.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $("#qrcodeCanvas").qrcode({
             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
             width : "200",               //二维码的宽度
             height : "200",              //二维码的高度
             background : "#ffffff",       //二维码的后景色
             foreground : "#000000",        //二维码的前景色
             src: &#39;photo.jpg&#39;             //二维码中间的图片
         });
     });
 </script>
 
 </head>
 <body>
     <center>
       <h2>该二维码支持中文和LOGO</h2>
       <div id="qrcodeCanvas"></div>
     </center>
 </body>
 </html>

The above is the detailed content of How to use jquery to generate a QR code with a logo in the middle? (with code). For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery 封装 JS
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to advanced design and control of ReactNext article：Introduction to advanced design and control of React

Related articles

See more