How do I create a download link for qrcode in jQuery?

Question

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.

Answer 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);        
});

Answer 2

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.