2

I'm using goqr.me api to create qrcode images. Now I want to create a download link for qrcode image.

I'm creating qrcode image this way:

function generateQrcode(data) {
    var params = {
        data: data,
        size: '200x200',
        margin: 0
    };

    // populate the preview box with the generate qrcode
    var dwnldUrl = 'https://api.qrserver.com/v1/create-qr-code/?'+$.param(params);
    previewBox.html('<img src="'+dwnldUrl+'" alt="qrcode-image"/>');
}

I want to have a download button for the qrcode image like this:

$('#qrcode-dwnld-btn').click(function() {
   // something to trigger download for the image ....    

}

Or is there anyother cross-browsing solution for this ?

Thanks for help.

tokyovariable
  • 1,656
  • 15
  • 23
osmanz
  • 481
  • 5
  • 15

2 Answers2

1

I got the solution. goqr.me api provides the 'download' parameter, we need to pass its value as '1' in the request to download image.

And then, we can set window location href to the resulted url.

$('#qrcode-dwnld-btn').click(function() {
    var qrCodeBaseUri = 'https://api.qrserver.com/v1/create-qr-code/?',
        params = {
            data: data,
            size: '200x200',
            margin: 0,
            // more configuration parameters ...
            download: 1
        };

    window.location.href = qrCodeBaseUri + $.param(params);        
});
osmanz
  • 481
  • 5
  • 15
0

Downloadify (https://github.com/dcneiner/Downloadify) may do what you want.

Alternatively, I found adding the download="filename.ext" to your tag may work, but it is a HTML5 feature:

<a href="url/to/your/qrcode" download="filename.ext"><img src="url/to/your/qrcode" /></a>

Of course substituting filename.ext with something that makes more sense.

Hope this helps.

strikernl
  • 55
  • 5
  • 14
  • Thanks for help. Yeah it works but I want a cross-browser solution. As you said its HTML5, doesn't work in IE at all. – osmanz Apr 29 '14 at 08:13
  • Apparently you can work around it not working in browsers older than IE10, this may help: http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/ – strikernl Apr 29 '14 at 08:15