Question

113

Convert JQuery QR Code to Image using JS

rated 0 times [ 118] [ 5] / answers: 1 / hits: 17098 / 9 Years ago, sun, august 23, 2015, 12:00:00

I was wondering how it's possible to download the JQuery generated QR code or convert to a downloadable image (png/jpeg) using javascript.

I tried what was here:
Capture HTML Canvas as gif/jpg/png/pdf?
But no success. I think it's related to the output. There is a table and canvas output, but both do not give the image data...

Here is my code:

<script src=js/jquery-1.3.2.js></script>

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

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



<div id=output></div>

<script>

jQuery(function(){

    jQuery('#output').qrcode(http://);

})





var canvas = document.getElementById(output);

var img    = canvas.toDataURL(image/png);

document.write('<img src='+img+'/>');

</script>

Also I was hoping to surround the QR Code with a white background (Adding rows and columns within the div) before converting to image to aid the detection (so that the background is also included in the image).

Any help is appreciated...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 9 Years ago katia · Accepted Answer

The only problem with this is that you called the toDataURL() function not for the canvas element.
You can get the canvas with jquery and it will work.

source

jQuery(function(){

    $('#output').qrcode(http://);



    var canvas = $('#output canvas');

    console.log(canvas);

    var img = canvas.get(0).toDataURL(image/png);

    //or

    //var img = $(canvas)[0].toDataURL(image/png);

    document.write('<img src='+img+'/>');

});