Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der Generierung von QR-Code-Bildern mit JavaScript_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:23:12
Original
1372 Leute haben es durchsucht

Zusammenfassung:

So stellt Baidu Encyclopedia QR-Codes vor: QR-Code (Quick Response Code), auch bekannt als 2D-Barcode, ist ein Schwarz-Weiß-Code, der bestimmte geometrische Figuren verwendet, die auf einer Ebene (zweidimensionale Richtung) entsprechend bestimmten Bedingungen verteilt sind Die alternativen Grafiken sind der Schlüssel zu allen Informationsdaten. In modernen kommerziellen Aktivitäten kann eine breite Palette von Anwendungen realisiert werden, wie zum Beispiel: Produktfälschungsschutz/-verfolgung, Werbe-Push, Website-Links, Daten-Downloads, Warentransaktionen, Positionierung/Navigation, E-Commerce-Anwendungen, Fahrzeugmanagement, Informationsübertragung , usw. Heutzutage hat die Anwendung der Scan-Funktion (als 313 bezeichnet) auf Smartphones zu einer zunehmenden Verbreitung von QR-Codes geführt. Mit der starken Entwicklung der heimischen Internet-of-Things-Branche wurden mehr Anwendungslösungen für die QR-Code-Technologie entwickelt und QR-Codes entwickelt Der Einstieg ins mobile Internet wird wirklich Realität.

Beim Surfen im Internet können wir überall QR-Codes sehen. Wie generiert man also QR-Codes im Frontend? Heute werde ich die Front-End-Generation von QR-Codes teilen.

Einleitung:

QRCode.js ist eine js-Bibliothek, die HTML5-Canvas und Tabellen-Markup im DOM browserübergreifend unterstützt. Was wir verwenden, basiert auf QRCode.js.

Browser:

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile usw.

jquery-qrcode:

jquery-qrcode-Funktionen: einfache Bedienung, geringe Größe, nur 14 KB nach der Komprimierung, unterstützt jedoch keine chinesische Codierung.

<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
$(function(){
$('#qrcode').qrcode("http://www.cnblogs.com/xiyangbaixue");
// 更详细的配置
// $('#qrcode').qrcode({
// text: "http://www.cnblogs.com/xiyangbaixue", // 要编码的字符串
// width: 50, // 定义宽度
// height: 50, // 定义高度
// background: "#ccc", // 背景色
// foreground: "red" // 前景色
// });
})
</script>
Nach dem Login kopieren

Wirkung:

qrcodejs:

Funktionen von qrcodejs: Der in China generierte QR-Code wird beim Scannen nicht verstümmelt angezeigt und Sie können auswählen, welches Element zum Zeichnen des QR-Codes verwendet werden soll.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "http://www.cnblogs.com/xiyangbaixue");
// 或者
// new QRCode(document.getElementById("qrcode"), {
// text: "http://www.cnblogs.com/xiyangbaixue",
// width: 50,
// height: 50,
// background: "#ccc",
// foreground: "red"
// });
</script>
Nach dem Login kopieren

SVG verwenden:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
// qrcode.clear(); // 清除二维码
</script>
Nach dem Login kopieren

Wirkung:

Konfigurationsparameter:

Render-String

Konfigurieren Sie, welches Knotenelement zum Zeichnen des QR-Codes verwendet wird. Die Optionen sind Tabelle, SVG und Leinwand

Die Standardauswahlreihenfolge ist Leinwand -> SVG ->

Textzeichenfolge


Zu kodierende Zeichenfolge

Standard: ""

Breitenzahl


Die Länge des QR-Codes, die Einheit ist px

Es ist zu beachten, dass bei Verwendung von Tabelle oder SVG zum Zeichnen des QR-Codes dieser entsprechend verkleinert wird, sodass die Dimension der QR-Code-Matrix geteilt werden kann.

Standard: 256

Höhenzahl


Die Breite des QR-Codes, die Einheit ist px

Es ist zu beachten, dass bei Verwendung von Tabelle oder SVG zum Zeichnen des QR-Codes dieser entsprechend reduziert wird, sodass die Dimension der QR-Code-Matrix geteilt werden kann.

Standard: 256

richtige Level-Nummer


Die Fehlerkorrekturstufe kann 0, 1, 2 oder 3 sein. Je größer die Zahl, desto größer ist die erforderliche Fehlerkorrekturstufe

Standard: 3

Hintergrundfarbe


Hintergrundfarbe

Standard: #FFFFFF

Vordergrundfarbe


Vordergrundfarbe

Standard: #000000

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage