1

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...

Community
  • 1
  • 1
armd0202
  • 45
  • 1
  • 3
  • 7

2 Answers2

1

In your code 

var canvas = document.getElementById("output");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

would get executed earlier than jQuery('#output').qrcode("http://");, domready only starts when every element on the page is accessible, and scripts are executed on load. So they should be put into that domready callback too.

Another issues is jquery.qrcode creates a canvas under target, so var canvas = document.getElementById("output"); would find the div, not the canvas, you can use document.querySelector("#output canvas"); to get it.

And if you just want a image to be downloadable, set an event handler, then when it's triggered, create an <a> and set href to the canvas.toDataURL, download to the filename you want, then simulate a click.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div id="output"></div>
<script>
jQuery(function(){
  jQuery('#output').qrcode("http://");
   
  // the lib generate a canvas under target, you should get that canvas, not #output
  // And put the code here would ensure that you can get the canvas, and canvas has the image.
  var canvas = document.querySelector("#output canvas");
  var img = canvas.toDataURL("image/png");
  $(canvas).on('click', function() {
    // Create an anchor, and set its href and download.
    var dl = document.createElement('a');
    dl.setAttribute('href', img);
    dl.setAttribute('download', 'qrcode.png');
    // simulate a click will start download the image, and name is qrcode.png.
    dl.click();
  });
   
  // Note this will overwrite any current content.
  // document.write('<img src="'+img+'"/>');
})

</script>
fuyushimoya
  • 9,715
  • 3
  • 27
  • 34
1

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+'"/>');
});
Community
  • 1
  • 1
user3223100
  • 26
  • 3