qrcode generation standalone (doesn't depend on external services)

Overview

jquery.qrcode.js

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code.

Show, don't tell, here is a example

How to Use It

Let me walk you thru it. First include it in your webpage with the usual script tag

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

Then create a DOM element which gonna contains the generated qrcode image. Lets say a div

<div id="qrcode"></div>

Then you add the qrcode in this container by

jquery('#qrcode').qrcode("this plugin is great");

This is it. see it live.

You can set the height and width of the generated qrcode:

jquery('#qrcode').qrcode({width: 64,height: 64,text: "size doesn't matter"});

Conclusion

jquery.qrcode.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Comments
  • Character limit on the codes

    Character limit on the codes

    I was tinkering with plugin and noticed that after a certain amount of characters, the QR code was no longer being output to the screen. Is there a limit that I was not aware of? I definitely want to utilize the plugin on a resume page I have set up and have it link to a .vcf contact card. It just kept breaking every time I tried. Had to resort to an image for the time being.

    opened by tw2113 8
  • Add version & tag

    Add version & tag

    @jeromeetienne, is it possible to add the version and appropriate tag to your repository? It is necessary to add jquery-qrcode to CDN (see http://git.io/M2eOqA).

    opened by toogle 4
  • .noConflict() compliance: only reference $, not jQuery, inside the closure

    .noConflict() compliance: only reference $, not jQuery, inside the closure

    According to the jQuery coding standards (http://wiki.jqueryui.com/w/page/12137737/Coding-standards), you shouldn't reference 'jQuery' inside the closure, only '$':

    .noConflict() compliance

    Wrap plugins in a closure that passes jQuery in as a parameter. Inside the closure, only reference jQuery through the parameter variable.

    (function( $ ) { // inside here only reference $, not jQuery }( jQuery ) );

    opened by jgoldberg 4
  • Canvas renderer: Thin lines between blocks

    Canvas renderer: Thin lines between blocks

    Hi there, great plugin! But is there a way to fix the thin white lines between the blocks when using the canvas renderer? It works anyway, but just doesn't look that nice... Thanks, Jakob

    opened by jschroeter 4
  • typeNumber doesn't work 1-40

    typeNumber doesn't work 1-40

    Hi All,

    I'm struggling to find option to generate a QRcode smaller, we can specify the size, but the QR code stays with high version. Trying to change the typeNumber option doesn't change it between 1-40, wondering if there is a bug here. I want to generate a small version 2 QR code, actually not possible, what should be the option?

    here example of my code (with lots of options tests xD): $j('#qrcode').qrcode({ render : "canvas", // canvas, table, png width: 128, height: 128, typeNumber: -1, correctLevel: 1, /* seems to reduce a bit the type, previous option doesn't seem to work from 1-14*/ /* pixelsPerTile: 10, --> doesn't seem to work*/ padding: 0, border: 0, background: "#ffffff", foreground: "#000000", text : url });

    As I understand, to solution my problem I should enter "typeNumber: 2" --> but QR code is not generated and there is an error in the console log: code length overflow. (1012>272)

    EDIT: So what I want to achieve is control or have proper version generated depending on the size: https://www.qrcode.com/en/about/version.html

    opened by Taeslash 2
  • Missing queryString

    Missing queryString

    $('#qrCode').qrcode({ width: 80, height: 80, text: "http://xxx.xx.com?t=12312312" });

    In some browser the t=12312312 will be gone.

    Anyone can help?

    opened by mqliutie 2
  • set DOCTYPE or IE9 won't render the canvas examples

    set DOCTYPE or IE9 won't render the canvas examples

    IE9 will exit with "TypeError: object doesn't support property or method 'getContext'" if you don't set the DOCTYPE.

    This should be merged into gh-pages too, or, even more: you should have only one branch :)

    opened by evgeni 2
  • IE requires

    IE requires "table"; others require "canvas"

    The issue with IE is a problem for me. When I change the "render" attribute to "table", the script works on IE, but not on any other browser -- I just get a block of horizontal lines. Is there a way to enable table mode for just IE and otherwise use the canvas mode? I've tried using "conditional comments" but have been unsuccessful getting them to work. Do you have any suggestions? I would not like to choose between IE and everything else. About 1/3 of my audience uses IE, and 2/3 uses other browsers.

    opened by delugach 2
  • Issue with special character when used in  url then the generated QR not able to be scanned

    Issue with special character when used in url then the generated QR not able to be scanned

    When use special character in url then the QR gets generated but when we scan that QR then unable to scan the QR code. eg: jQuery('#qrcode').qrcode('http://maps.google.com/?q=test-Data,&Name=test%20lcoation-check');

    can someone please help me out on this?

    opened by monicss 1
  • Broken: uses a non-existent function

    Broken: uses a non-existent function

    I get this exception originating from the plugin when I try using it. Was this written for an old version of jquery, or with an undeclared dependency?

    jQuery.Deferred exception: this.each is not a function r.fn.qrcode@http://localhost:8000/static/js/jquery-qrcode.min.js:26:69
    shortcut_info.init/populateQR@http://localhost:8000/static/js/info.js:53:6
    @http://localhost:8000/potato/?info:36:7
    g/</j@http://localhost:8000/static/js/jquery.js:2:29946
    g/</k<@http://localhost:8000/static/js/jquery.js:2:30262
     undefined
    
    opened by giftig 1
  • How to print it out through a browser?

    How to print it out through a browser?

    Two-dimensional code can be saved into a picture? Because the two-dimensional code display can not be printed out through the browser print function.

    function print() { window.print(); }

    opened by xiaoniao 1
  • Update the QR code default image to custom QR code

    Update the QR code default image to custom QR code

    My clients want's me to change the default QR image to a new QR code image(PFA). But I am unable to generate the desired image. download Can you please help me to fix this.

    opened by sajesh1985 0
  • CDNjs donot have required files

    CDNjs donot have required files

    I have checked CDNjs do not have have files needed to run this QR code generator

    this is available jquery.qrcode.js this is not available qrcode.js CDN link: https://cdnjs.com/libraries/jquery.qrcode

    idea is to use libman.json client library downloader from Visual Studio 2019 in .Net Core.

    opened by mabubakarriaz 0
  • 华为手机 table模式 生成的二维码畸形 不用table模式可以正常生成

    华为手机 table模式 生成的二维码畸形 不用table模式可以正常生成

    此种方式有问题 $("#code").qrcode({ render: "table", //table方式 width: 128, //宽度 height:128, //高度 text: url //任意内容 });

    换成下面这张 华为手机可以正常生成 $("#code").qrcode({ // 取消table方式生成 兼容部分华为手机 width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", text: url });

    opened by tucaoxingren 0
  • 二维码内容支持写入中文_zh  引入utf.js文件

    二维码内容支持写入中文_zh 引入utf.js文件

    用法:引入js <script type="text/javascript" src="../normal/utf.js"></script> 二维码内容: $('#qrcode').qrcode(utf16to8("中文字词Test")); utf.js源码:

    /* utf.js - UTF-8 <=> UTF-16 convertion *

    • Copyright (C) 1999 Masanao Izumo [email protected]
    • Version: 1.0
    • LastModified: Dec 25 1999
    • This library is free. You can redistribute it and/or modify it. */

    /*

    • Interfaces:
    • utf8 = utf16to8(utf16);
    • utf16 = utf16to8(utf8); */

    function utf16to8(str) { var out, i, len, c;

    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i);
    } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    } else {
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    }
    }
    return out;
    

    }

    function utf8to16(str) { var out, i, len, c; var char2, char3;

    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
    c = str.charCodeAt(i++);
    switch(c >> 4)
    { 
      case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
        // 0xxxxxxx
        out += str.charAt(i-1);
        break;
      case 12: case 13:
        // 110x xxxx   10xx xxxx
        char2 = str.charCodeAt(i++);
        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
        break;
      case 14:
        // 1110 xxxx  10xx xxxx  10xx xxxx
        char2 = str.charCodeAt(i++);
        char3 = str.charCodeAt(i++);
        out += String.fromCharCode(((c & 0x0F) << 12) |
    				   ((char2 & 0x3F) << 6) |
    				   ((char3 & 0x3F) << 0));
        break;
    }
    }
    
    return out;
    

    }

    opened by KaapoMarcus 1
Owner
Jerome Etienne
Making WebAR a reality - Around Javascript and WebGL - 8th most active user on github - Write @learningthreejs - ex daqri
Jerome Etienne
A pure JavaScript QRCode encode and decode library.

QRCode A pure JavaScript QRCode encode and decode library. QRCode guide and demo QRCode guide QRCode example QRCode example use worker Modify from kaz

nuintun 135 Nov 28, 2022
Calculates maximum composite SLA for a list of sequentially provided cloud services or your custom-defined services.

SlaMax Calculates maximum composite SLA for a list of sequentially provided cloud services or your custom-defined services. Here are a few use-cases y

Mikael Vesavuori 4 Sep 19, 2022
This repository demonstrates how to integrate your Dialogflow agent with 3rd-party services services using a Node.JS backend service

This repository demonstrates how to integrate your Dialogflow agent with 3rd-party services services using a Node.JS backend service. Integrating your service allows you to take actions based on end-user expressions and send dynamic responses back to the end-user.

ddayto 10 Jul 21, 2022
Live port of Lark's standalone parser to Javascript

Lark.js Generate LALR(1) parsers in Javascript Lark is a popular parsing toolkit for Python. This project is a live port of the Lark standalone parser

Lark - Parsing Library & Toolkit 51 Nov 19, 2022
A lightweight, standalone package to integrate full PWA features into Remix 💿

Remix PWA PWA integration & support for Remix Remix PWA is a lightweight, standalone npm package that adds full Progressive Web App support to Remix ?

Abdur-Rahman 220 Jan 3, 2023
Standalone Epub reader using Bibi.

bi-epub-reader Epub reader application using Bibi. Features Beautiful epub viewer Open file as associated file type Standalone application You can see

azu 8 Aug 5, 2022
GraphQL Hive provides all the tools the get visibility of your GraphQL architecture at all stages, from standalone APIs to composed schemas (Federation, Stitching)

GraphQL Hive GraphQL Hive provides all the tools the get visibility of your GraphQL architecture at all stages, from standalone APIs to composed schem

Kamil Kisiela 184 Dec 21, 2022
Standalone AJAX library inspired by jQuery/zepto

ajax Standalone AJAX library inspired by jQuery/zepto Installation component-install ForbesLindesay/ajax Then load using: var ajax = require('ajax');

Forbes Lindesay 365 Dec 17, 2022
NFT Marketplace framework to build standalone NFT marketplace or inApp/inGame NFT marketplace

NFT Marketplace This project is a decentalized NFT Marketplace framework which is to be the baseline for you to build standalone NFT marketplace or in

Reddio, inc. 14 Dec 19, 2022
Adds external & internal translators to various sites.

Twitter External Translator Adds a "Translate with ..." button to Tweets and User Bios. This was a fork of DeepL Twitter translation Version Link Alte

Magic 6 Oct 17, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Jihane Haddad 5 Feb 10, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
Kyrillos Hany 14 Aug 10, 2022
This plugin for Obsidian enables you to quickly jump to internal and external links

Obsidian Quick Jump Plugin This plugin for Obsidian enables you to quickly jump to internal and external links. This plugin is inspired by Jump to lin

Tadashi Aikawa 9 Sep 24, 2022
Chain Link External Inititator Template

Chain Link External Inititator Template AWS Lambda Ready Pre-Deployment 1) Install the Serverless Framework globally npm install serverless -g 2) In

0xD1x0n 4 May 6, 2022
An App that uses an external APIs to show meals from around the world

This website displays recipes meals using APIs to retrieve details from a DataBase and also implements features like adding a functional Like button for every item and a section for adding a new comment. All these through an external API to send and receive data.

Fernando Salas 4 Mar 12, 2022
The Meal DB web application displays a list of meals that provided by an external API.

The Meal DB The Meal DB web application displays a list of meals that provided by an external API. The users can like a meal, leave some comments or m

Behnam Aghaali 5 Mar 12, 2022
NodeJS library without any external dependencies to check if free HTTP/SOCKS4/SOCKS5 proxies are working/up

free-proxy_checker NodeJS library WITHOUT any external dependencies to: download free proxies; check if free HTTP/SOCKS4/SOCKS5 proxies are working/up

antoine vastel 15 Nov 6, 2022