JavaScript QR Code Barcode

This is an elegant solution that enables you to generate high quality QR Code barcodes using JavaScript with a HTML5 Canvas or World Wide Web Consortium (W3C) compliant Web Fonts. The generated QR Code barcode is able to meet the strictest industry requirements required by the auto-id industry.

QR Code Barcode with JavaScript and HTML5 Canvas

http://www.barcoderesource.com

The snippet below illustrates the use of the HTML5 Canvas tag on a HTML page. 


    <canvas id="barcodeCanvas" width=300 height=300>http://www.barcoderesource.com</canvas>

The following JavaScript code shows how to to render a QR Code barcode on the HTML5 Canvas. 


    var elementBarcode = document.getElementById("barcodeCanvas");            
    var barcode = new QRCode(elementBarcode.innerHTML, "L", 8);
    barcode.drawOnCanvas("barcodeCanvas");

Parameters

Input Data: elementBarcode.innerHTML (or any other input string)

Error Correction Level: "L" ("L", "M", "Q" or "H")

L - Allows recovery of up to 7% data loss
M - Allows recovery of up to 15% data loss
Q - Allows recovery of up to 25% data loss
H - Allows recovery of up to 30% data loss

Mask: 8 (0 to 7 or 8 for Auto)

The purpose of a mask pattern is to make the QR code easier for QR scanner to read.

QR Code Barcode with JavaScript and Barcode Web Fonts

The output generated by the JavaScript library can also be rendered as a QR Code Barcode through the use of a Web Open Font Format Font (WOFF). WOFF is an optimized font format recommended by World Wide Web Consortium (W3C) for use in web pages. It uses compression on Open Type or True Type fonts to achieve file size reduction so that it can be efficiently distributed over the web.

The QR Code Barcode WOFF fonts provided by ConnectCode have been tested vigorously to display and print on different desktop and mobile browsers. It is important to know that a font raster to the output device and is not limited to DPI (Dots per Inch) of the computer screen. This enables very high quality QR Code barcodes to be generated.

The font solution for generating barcodes is based on ConnectCode’s True Type barcode font engine that has passed numerous independent audits and is widely adopted by many Fortune 500 companies. QR Code fonts in Embedded Open Type (EOT), and Open Type (OTF) format are also provided to ensure that the solution works on legacy browsers that have yet to fully support WOFF.

http://www.barcoderesource.com

The "Resource/Javascript/" folder contains the web fonts, HTML web page and JavaScript programs for generating QR Code Barcodes. The snippet below illustrates the use of the QR Code JavaScript library with the WOFF QR Code Web Font. 


    var barcodeFonts = document.getElementById("qrBarcodeFonts");
    var barcodeFontsEncoder = new QRCode(barcodeFonts.innerHTML, "L", 8);           
    var result = barcodeFontsEncoder.encode();
    barcodeFonts.innerHTML = result;

@font-face Barcode

The Cascading Style Sheets (CSS) @font-face feature is used to specify an online font for display on web pages. This eliminates the need to depend on the pre-installed fonts on computers. The following illustrates the font-face tag in the site.css file. 


        @font-face {
            font-family: CCodeQR;
            src: url("fonts/CCodeQR_Trial.eot");
            src: local("CCodeQR_Trial"), 
                 url("fonts/CCodeQR_Trial.otf") format("opentype"),                 
                 url("fonts/CCodeQR_Trial.woff") format("woff");
        }

Applying the font-face to the qrBarcodeFonts div element: 


        #qrBarcodeFonts {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: 'CCodeQR', sans-serif;               
            font-size: 12px;
	    letter-spacing: -0.01px;
	    line-height: 99.9%;
        }

Supported Browsers and Platforms

ConnectCode Certified
+ Current and newer versions

Please note that though our QR Code Barcode Web Fonts/HTML5 Canvas solution works on many more browsers, we currently only provide technical support for the above-mentioned certified browsers.