Image to canvas opening in window not dowloading

Question

I am converting a canvas to an image which seems to be working fine.

But the image is opening in a new window not downloading directly.

Any assistance how I can make this happen?

HTML:

<div class="sixteen columns">
    <br />
        <canvas id="qrcodeCanvas"></canvas>
        <br /><br />
        <div class="button qrDownload">Download</div>
    </div>

JQuery:

 $(".qrDownload").click(function (event) {
        var canvas = document.getElementById("qrcodeCanvas");
        var img = canvas.toDataURL("image/png");
        document.write('<img src="' + img + '"/>');
    });

Similar approaches : http://stackoverflow.com/questions/3916191/download-data-url-file — Delapouite, Jul 03 '14 at 09:28

score 0 · Accepted Answer · answered Jul 03 '14 at 15:28

Try this:

$(".qrDownload").click(function (event) {
    var html="<p>Right-click on image below and Save-Picture-As</p>";
    html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
    var tab=window.open();
    tab.document.write(html);
});

Also:

.toDataURL will fail if you have cross-domain security issues caused by drawing an image from another domain on the canvas.

score 0 · Answer 2 · answered Sep 05 '14 at 07:50

var c = document.getElementById("popup");
var link = document.getElementById('cropImageLink');
// link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
link.open();

After that you can add below to open in new window.If you remove comment than it's download other wise using window.open(); it should open in new window.

Image to canvas opening in window not dowloading

2 Answers2