Heim > Artikel > Web-Frontend > Wie generiert man mit jquery einen QR-Code mit einem Logo in der Mitte? (mit Code)

Wie generiert man mit jquery einen QR-Code mit einem Logo in der Mitte? (mit Code)

yuliaOriginal: 2018-09-13 16:34:012184Durchsuche

jquery.qrcode.js ist ein JQuery-Plug-In, das auf dem Client einen Matrix-QR-Code QRCode generieren kann. Es kann zum einfachen Generieren von 2D-Barcodes auf der Seite verwendet werden. Dieses Plug-In kann unabhängig verwendet werden und ist relativ klein, weniger als 4 KB nach der GZIP-Komprimierung. Da es sich um einen Barcode handelt, der direkt auf dem Client generiert wird, ist kein Bild-Download erforderlich und er kann schnell generiert werden. Es basiert auf einer mehrsprachigen Klassenbibliothek und ist nicht auf andere zusätzliche Dienste angewiesen.

Vorteile: Der Vorteil der Verwendung von jquery-qrcode besteht darin, dass auf der Serverseite keine redundanten QR-Code-Bilder generiert werden müssen. Der QR-Code wird direkt auf der Clientseite über JavaScript generiert, wodurch die Bandbreite und der Wartungsaufwand effektiv reduziert werden Kosten.

Zunächst können Sie einen Blick auf die offizielle Website von jquery.qrcode.js werfen. Es gibt auch Beispiele auf der offiziellen Website. Allerdings unterstützt jquery.qrcode.js auf der offiziellen Website kein Chinesisch. Beginnen wir jetzt ohne weiteres. Die Datei qrcode.js auf der offiziellen Website implementiert keine chinesische Unterstützung und das Hinzufügen von LOGO. Jetzt haben wir diese Datei in die Datei jquery.qrcode.js geändert. Darüber hinaus wird auch eine Datei zum Transkodieren von Chinesisch benötigt, nämlich utf.js. Anschließend wird die Methode utf16to8(str) der Datei utf.js in der Datei jquery.qrcode.js aufgerufen, um das Chinesische zu transkodieren.

Das Folgende ist ein Beispiel, das ich geschrieben habe. Die für dieses Beispiel erforderlichen js-Dateien sind jquery.qrcode.js und utf.js sowie jquery-1.8.0.js. Es gibt auch ein Logo-Bild, das zum Herunterladen angeklickt werden kann. Der aufgerufene JSP-Code lautet wie folgt:

  <%@ 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>

Das obige ist der detaillierte Inhalt vonWie generiert man mit jquery einen QR-Code mit einem Logo in der Mitte? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery 封装 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in das erweiterte Design und die Steuerung von ReactNächster Artikel：Einführung in das erweiterte Design und die Steuerung von React

In Verbindung stehende Artikel

Mehr sehen