I'm looking for a way to save the file as a SVG using a download a tag if possible.

I'd like to generate the QR, download and use it for print, however, I've been unable to find a way to do that.

I understand that doing that with the canvas element is not possible.

Hi

The image box option is not working with an img element displaying a SVG.
Can you please fix this?

Thanks,
Christoph

The following code successfully generates a QR code. However, when I scan it on AT&TCodeScanner with an iPad, all the special characters after the hash tag get the equivalent of encodeURIComponent() done to them ("#" => "%23", "=" => "%3D, etc) , messing up the hash links. See the bottom of the page for the actually scanned link.

<div class="qr-3 qr-code"></div>

<script>
        $(document).ready(function() {

          $(".qr-3").qrcode({
            render: 'image',
            size: 86,
            fill: '#000',
              text: "http://www.google.com/search?tbm=shop&gws_rd=ssl#tbs=vw:l,mr:1,local_avail:1,seller:1311674%7C8740%7C1192406%7C9119074%7C3136905&q=lre3083st"
          });
       });
</script

http://www.google.com/search?tbm=shop&gws_rd=ssl%23tbs%3Dvw%3Al%2Cmr%3A1%2Clocal_avail%3A1%2Cseller%3A1311674%257C8740%257C1192406%257C9119074%257C3136905%26q%3Dlre3083st

How can we update the information we added to the qr code without changing the qr code.

var image = new Image();
image.src = 'data:image/png;base64,' + logo;
image.setAttribute('id', 'logo');
image.setAttribute('style', 'display: none');
document.body.appendChild(image);

// Generate the QR Code.
$('#qrcodeDIV').qrcode({
    foreground: '#00000',
    background: '#fffff',
    width: 302,
    height: 302,
    text: "exampleValue",
    typeNumber: -1,
    errorCorrectLevel: 'M',
    mode: 4,
    image: $('#logo')[0]
});

Ich verwende den oben stehenden Code in einer FileMaker-Anwendung. "logo" (Zeile 3) ist ein Base64-String eines png-Bilds. Auf Windows verwendet FileMaker eine IE11-Engine. Dort funktioniert der Code ohne Probleme. Auf MacOSX wird eine Safari-Engine verwendet. Dort erhalte ich einen QR-Code ohne Logo. Nun habe ich den Code in eine HTML-Datei exportiert und verwende im image als 'src' einen Dateipfad (siehe hier: https://github.com/swissniggi/qrcode-test). Nun habe ich ein merkwürdiges Verhalten:

Wenn ich den Original-Code verwende (siehe testImage_ES6.html aus meinem Repository) funktioniert es in keinem Browser. IE11 uterstützt kein ES6 und in Firefox/Edge/Safari erhalte ich die Meldung:"Uncaught TypeError: $(...).qrcode is not a function".

Wenn ich den konvertierten Code verwende (siehe testImage_ES5.html aus meinem Repository) funktioniert es im IE11 einwandfrei. In Edge erhalte ich immer einen QR-Code ohne Logo. Im Firefox funktioniert es nur, wenn ich den Pfad zur HTML-Datei in die Adresszeile einfüge und Enter drücke. Wenn ich die Datei durch Doppelclick öffne oder die Seite neu lade erhalte ich ebenfalls einen QR-Code ohne logo. Im Safari stelle ich das gleiche Verhalten fest.

PS: Das Dateiformat des Bildes hat auf das Verhalten keinen Einfluss.

I need the qrcode returned to a variable, how would you recommend I do so?

Hi:
Thank your work!!
A problem is here ! I am using qr code, when two-dimensional code can be generated, but the middle of the logo image for the first time and can not display refresh can display pictures obtained through HTTP access, then turn base64. And I used on Android and IOS device!!

HELP!!! HOW, I CAN FIX IT??? THANKS!!

Hello please help, can't make it working...
I downloaded the script, integrated it to my site... opened created qrcode design, Now how to insert that qrcode into my pages?

Another Question: How to make qr code to Automatically generate page url where I'll insert the qrcode?

Thank you In advanced!

hallo,

How to I save qrcode image automatically in folder? could you help me, please?

Thank you, so much.

Thank you!

Da

I'm receiving this error when I try to use mode 3/4 (images).

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

Any ideas as to why this would be happening?

when i try to set size to 45, the render mode image and canvas is broken like blur added to it.when i try use render mode div, its sharp as hell...why is that?

Hi,
Is there any chance for providing .d.ts file for this code for typescript usage?
Thanks,
Galia

Some edges inside the rendered QR image are blurred by 1 pixel.

In comparison, google chart generated images have no blurred edges. The URL used was https://chart.googleapis.com/chart?cht=qr&chs=200x200&chld=M|1&chl=abcdefghijklmnopqrstuvwxyz0123456789

See the attached screen capture image.

Code in HTML template:

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

Code in JavaScript helper:

$('#qrcode').qrcode({
                "render": "image",
                size: 165,
                text: "abcdefghijklmnopqrstuvwxyz0123456789"
            });

Note that google adds a blank frame around the QR code, so the actual QR code dimensions are 165 * 165 pixels.

Is it possible to change corners color?
Something like this:
Would appreciate any help!

Thanks

As you have a new lib for QR code generation, will you still maintain this library?

Hi there,
Thanks for sharing this plugin.
May i know how to use background and can it show logo middle of QR code?
$("#qrDiv1").qrcode({
"render": "canvas",
"size": 150,
"color": "#000",
"background": "url(http://127.0.0.1/img/LOGO.png)", // I try also "background": "/img/LOGO.png", but fail.
"text": "$ 20"
});

https://www.jsdelivr.com/package/npm/jquery-qrcode2.

The current version of the plugin in jsdelivr.com is 0.14.
It's recommended to keep syncing.

Hi,

Div method is much cleaner, so it prints better. However I can't make a 50 pix with div, while I can with canvas. But it gets blurry. Is there a way to cancel anti-alias with cavas method ?

i tired to install from bower but got the following error:
bower jquery-qrcode#v0.12.0 ENORESTARGET No tag found that was able to satisfy v0.12.0

think bower cannot recognise the the version syntax

Have a little trouble with it. What would the syntax be and does the image need to be converted to base64?

Thanks!

If possible, I am looking for a way to save text format QR data files.

I want to generate QR and use text data, but I could not find that way.

I need to print the QR code on the ReWrite card.

Example）

11111110001000110011001111111
10000010111001110000101000001
10111010100000001100101011101
10111010010010110010001011101
10111010111011111110101011101
10000010101010010011101000001
11111110101010101010101111111
00000000101100010100100000000
11010011000111000000101110110
00001001110110001000111001001
11010111000110001011111111110
01000101111111100010111001110
00110110001101000100011001011
11010000010101000001110000100
00010011100100000000101100111
10111001110101001101011011010
01101010111010010101110001010
10101100110011000100011000001
01111110110110000010011101011
11001000100010010110101000011
01001111110001111000111110100
00000000110100001101100010111
11111110110001001110101010010
10000010010001001010100010101
10111010010011011110111111000
10111010101111000000011011010
10111010011010100000100011101
10000010110011000101101010010
11111110100111100100110110010

When I export canvas to image, occurs this error.

jq(colorsetting).is('img') breaks if color is a string rgb(4,5,56) or rgba(5,5,5,0.5), but the actual drawing does support this so there's no reason to prevent it.

Hi, im looking for methods can destroy QR then init again but a found no solution

Hallo lars,

i would like to know how, language such as Chinese, Japanese, Arabic etc, are treated in order by produce the QR Code.
For example, before start to generate the QR Code, is Japanise (or Chinese etc) text converted to unicode character escape sequences ?
E.g. these are 2 Japanise character: \u3092\u30c0

I need this information to estimate a threshold value in my algorithm.

Cheers,
F

I wrote my own file to generate QR code. I'm a Chinese, so some of the code comment may not be displayed
.
The JS code is like this:
`<script>
'use strict';
//写入二维码生成函数
function GenerateQR() {
//清空结果展示页面
document.getElementById("result-display").innerHTML = "";
//进行二维码值对应生成
$('#result-display').empty().qrcode(
{
render: "canvas",
text: document.getElementById("info-text").value,
ecLevel: "H",
size: value,
fill: document.getElementById("colorpicker-value").value,
background: "#ffffff",
typeNumber: -1,
radius: parseInt($("#info-radius").val(), 10) * 0.005,
quiet: quite,
mode: QRmode,
mSize: parseInt(document.getElementById("info-mSize").value) / 100,
mPosX: 50,
mPosY: 50,
image: $("LOGOimg")[0]
}
);
}

    //在二维码内容字符数超出300时，进行提示
    document.getElementById("info-text-length-display").style.display = "inline";
    function CheckTypeOfQR() {
        if (document.getElementById("info-text").value.length >= 300) {
            document.getElementById("info-text-length-warning").style.display = "inline";
            document.getElementById("info-text-length-display").style.color = "#f8b600";
            if (document.getElementById("info-text").value.length >= 400 && document.getElementById("info-text").value.length < 550) {
                document.getElementById("info-text-length-display").style.color = "#f87000";
            } else if (document.getElementById("info-text").value.length >= 550) {
                document.getElementById('info-text-length-display').style.color = "red";
            } else {
                document.getElementById("info-text-length-display").style.color = "#00dd12";
            }
        } else {
            document.getElementById("info-text").maxlength = "";
            document.getElementById("info-text-length-warning").style.display = "none";
            document.getElementById("info-text-length-display").style.color = "#00dd12";
        }
    }

    //二维码内容为“网址”时，在文本前添加“http://”
    document.getElementById("type-setting-url").onclick = function () {
        if (!document.getElementById("info-text").value.includes("http")) {
            document.getElementById("info-text").value = "http://";
        }
    }

    document.getElementById("type-setting-text").onclick = function () {
        document.getElementById("info-text").value = "";
    }

    //写入二维码宽度及拖动条改变函数
    var value, radius, quite = 1, mSize = 0.18;
    var QRmode = 0;
    value = $('#info-width').val() * 4 + 100;
    $('#info-width-display').html(value.toFixed(1));
    $('#info-width').css({
        "background-size": (value - 100) / 4 + "% 100%"
    })
    function ChangeWidth() {
        value = $('#info-width').val();
        var valStr = value + "% 100%";
        $('#info-width-display').html((value * 4 + 100).toFixed(1));
        $('#info-width').css({
            "background-size": valStr
        })
        $("input[name='info-width']").val((value * 1).toFixed(1));
        value = value * 4 + 100;
        if (value >= 375) {
            document.getElementById("info-width-warning").style.display = "inline-block";
        } else {
            document.getElementById("info-width-warning").style.display = "none";
        }
    }

    //写入码点圆滑程度改变函数
    $('#info-radius').css({
        "background-size": "0% 0%"
    })
    $("input[name='info-radius']").val("0");

    function ChangeRadius() {
        radius = $('#info-radius').val();
        var valStrOfRadius = radius + "% 100%";
        $('#info-radius-display').html((radius * 1).toFixed(1));
        $('#info-radius').css({
            "background-size": valStrOfRadius
        })
        $("input[name='info-radius']").val((radius * 1).toFixed(1));
        radius *= 0.5;
        if (radius >= 30) {
            document.getElementById("info-radius-warning").style.display = "inline-block";
        } else {
            document.getElementById("info-radius-warning").style.display = "none";
        }
    }

    //写入二维码空白区域变化函数
    $('#info-quite').css({
        "background-size": $('#info-quite').val() + "% 100%"
    })
    function ChangeQuiteSize() {
        quite = $('#info-quite').val();
        var valStrOfQuite = quite + "% 100%";
        $('#info-quite-display').html((quite / 20).toFixed(0));
        $('#info-quite').css({
            "background-size": valStrOfQuite
        })
        quite /= 20;
    }

    //写入二维码图片图片尺寸改变函数
    $('#info-mSize').css({
        "background-size": $('#info-mSize').val() + "% 100%"
    })
    function ChangeMSize() {
        mSize = $('#info-mSize').val();
        var valStrOfmSize = mSize + "% 100%";
        $('#info-mSize-display').html((mSize / 1).toFixed(0) + "%");
        $('#info-mSize').css({
            "background-size": valStrOfmSize
        })
        mSize /= 100;
    }

    //写入二维码生成总集成函数
    var guiValuePairs = [
        ['size', 'px'],
        ['minversion', ''],
        ['quiet', ' modules'],
        ['radius', '%'],
        ['msize', '%'],
        ['mposx', '%'],
        ['mposy', '%']
    ];

    function OnImageInput() {
        var input = $('#upload-file')[0];
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (event) {
                $('#LOGOimg').attr('src', event.target.result);
                QRmode = 4;
                setTimeout(GenerateQR(), 250);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function download() {
        $('#download').attr('href', $('#container canvas')[0].toDataURL('image/png'));
    }

    //将颜色选择input框中的值进行改变
    document.getElementById("info-fgcolor").value = "#000000";
    //对input背景颜色进行调整
    document.getElementById("info-fgcolor").style.backgroundColor = "#000000";
    document.getElementById("info-fgcolor").style.color = "#ffffff";

    function ChangeFGValue() {
        //将颜色选择input框中的值进行改变
        document.getElementById("info-fgcolor").value = document.getElementById("colorpicker-value").value;
        //将值变为全大写模式
        document.getElementById("colorpicker-value").value = document.getElementById("colorpicker-value").value;
        //对input背景颜色进行调整
        document.getElementById("info-fgcolor").style.backgroundColor = document.getElementById("colorpicker-value").value;
        //对input框背景颜色十六进制值进行判断，如果在取整为10进制值后小于8000000，则改变字体颜色
        if (parseInt(document.getElementById("colorpicker-value").value.replace("#", ""), 16) < 8000000) {
            document.getElementById("info-fgcolor").style.color = "white";
        } else {
            document.getElementById("info-fgcolor").style.color = "black";
        }
    }

    //当enter键按下时，进行二维码生成
    document.onkeydown = function (e) {
        if (e.keyCode == 13 && document.getElementById("info-text").value != "") {
            GenerateQR();
        }
    }

    //写入二维码生成集成函数
    function init() {
        $('#upload-file').on('change', OnImageInput);
        $('input, textarea, select').on('input change', GenerateQR());
        $(window).load(GenerateQR());
        CheckTypeOfQR();
        document.getElementById("info-text-length-display").innerText = "  " + document.getElementById("info-text").value.length + " / 750";
        GenerateQR();
    }
    $(init);

</script>`

I have tried to attach a file to the page, but the result is:

Issue-Upload.zip
Please reply me after you found the solution. thank you for your patient!

Hello dear and thank for your work

I can't figure out how to display my text label and image background

var img_codebar = document.createElement('img')
img_codebar.src = "img/codebar.jpg"

$(div_codebar).qrcode({label : 'QR-certificat', fontname: 'Arial', fontcolor: 'white',text : 'text'', size : 100, render:"canvas", fill : "black", background : img_codebar, quiet: 1});

This give me a QR with a transparent background and no label

Can you help?

Hi, I do as #16 , but the chrome & safari doesn't show the image box in generated qrcode, leaving blank, firefox is ok. After page loaded, exec the function in console of dev tools, then chrome & safari will show as expected.

Is the plugin's order important or did I miss something?

Bower repo for jquery-qrcode points to gcusnieux/jquery-qrcode

Dear author, why not follow jQuery to support the best Module Specification of Web Front-End ?

It makes coding easier for developers & users~

please publish this library to npm, so it could be used with package managers such as npm and jspm

Any plans to add a call back function? So when the QR code is scanned, do this...etc.

it will appear when version is 15 and correct level is H !

Is it possible to generate the GS1 qrcode? I have tried to manually encode the FNCs but it does not seem to work ( i am most certainly doing it wrong).
thanks

Bower main file of bower.json
"main": "dist/jquery.qrcode.js"
should be:
"main": "dist/jquery-qrcode.js"

or change the filename of dist js.

Hi,
In render type 'div' the label is not displayed.
The same can be seen in your demo at :http://larsjung.de/jquery-qrcode/latest/demo/
I am not sure if this is normal or a bug.
Anyways many thanks for your code.
It is really helpful :)

I want to be able to save the image generated locally so i dont have to generate it again and again everytime i want to get the qr code for a url. Is that possible?

It is a bit weird, the qrcode rending suddenly stopped working (latest Chrome 74.0.3729.169), throwing this error:

    jquery-qrcode-0.17.0.js:220 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
    at draw_background_img (jquery-qrcode-0.17.0.js:220:11)
    at draw_background (jquery-qrcode-0.17.0.js:236:5)
    at draw_on_canvas (jquery-qrcode-0.17.0.js:387:3)
    at create_canvas (jquery-qrcode-0.17.0.js:395:10)
    at create_img (jquery-qrcode-0.17.0.js:400:35)
    at create_html (jquery-qrcode-0.17.0.js:461:12)
    at HTMLDivElement.<anonymous> (jquery-qrcode-0.17.0.js:512:21)
    at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
    at r.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:1003)
    at r.fn.init.main [as qrcode] (jquery-qrcode-0.17.0.js:508:15)

Line:

context.drawImage(settings.image, sl * size, st * size, sw * size, sh * size);

Maybe var context = $canvas[0].getContext('2d'); is not set correctly?

First of all, great job! This plugin looks really promising!

I'd like to suggest some feature i find interesting:

• a parameter to set the transparency level both for the black and white "squares"
• the possibility to have a background image (so that the transparent qrcode goes on top of it)
• a way to choose between standard squares and squares with low transparency, that contain smaller squares with a lower transparency

The goal would be something like this (this is the result of a simple generator in java i made for my company)

Hi, we recently found out that using the default transparent background might render certain A11Y display settings unusable. For instance with 'inverted colors' both the background of the webpage and the pixels of the QR code are then black... Not very A11Y friendly.

Might not be possible to change the default, but maybe warning in documentation?