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

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>

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>

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>

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