Image On HTML Canvas Can't Be Downloaded

Question

I have HTML canvas and it work fine to display image.

And I have this jquery code to download the image :

$(".img-download").click(function(){
    var data = canvas.toDataURL();
    download.href = data; -- I tried this to download image, but PNG file generated cannot be opened in photoshop or any other image manipulation apps
    alert (data); -- then, I tried to see what's actually the data content
});

And here's my download button :

<a href="" class="img-download btn btn-lg btn-default" download="image.png">Download</a>

Here's what the data content :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAH0CAYAAAAjYBdQAAAgAElEQVR4XrS9d7Cm6Vnm93Sf0DlMTp0naZSFTCokYNf2er2mbBZvFcG4WGxClQtThVibUpk/EFCLjQoEJmgUkECkrRImLMqiKEmIIIE0EsrSaKIm9/R0DqfP6fb1u677ft9vpJGE7Nqv58w53/e97xPu5w7XHZ7n3fSrv/rblzdt2jzys2lsbKyPy5suD16X9WvT2DyWNm8em/WT1yW+GZs36a/Ll/QXf2/yvZcv5T7uujT9vVnt6WL9LC/pzkvr4+LauXHu7Olx/vxpt7Okpi9d2lB/G2lf/V9W5xuXLo3N+vKy2qNNfjbWL42lpSX/MED6vKzrGIcG6b8Z3yY1TBvctbx5eawzL413WR/Q58rW1bFtxw5dR/uZg+9byn28mPP6+rr/XmIcG/pedPLXvp5xp2/aps/QSWPf2DDdGLPpwk2Mx9MwYUMzN3bZ7fC+vpjm6zXQ55sZtNYia+JWTR/ebFZ7lzZ0v77XSrh9+qflzZtFJ415aWnZffV85vWk+9Dssm7lms36Y/OmpbFrx65x1dXXjOUtq15r+twsuq+vb4wTJ06MCxcujJ07d+hn59gmerImyysr7tN9aU039MPvZfXP2OAvj19jUqPVt9ZoZXXs3rt3bN22bZw4eXI8dfwpX3uJ8XC9aE9/58+fdz9bt24ND7it8FfIDIHCrxsaM/0v+f2SyJI1oM26JRRjLPpv06ZL4r5L4pWN0JzPWWOuh59MUfGxaAOx6MNcU/wCDTOerNNl+vXa5Tro7DH4ojG2bN0ydu/eM5aXV8fpM2fGGf2wjh4jvK8+t4r220STVdOXdjMG5Gvt4vo4d+68aRL+GKKZZoBcqK8lfdY0siyUjCIjfG5R0Yu/aZY2uWZTyb/li2GXPDJmzyuz6elOffsjLhDZ6L9pQbtLy8s1ttzWNDFP0b75V...E/7UDlTn0Y32rlx6914e6lETEZT1eAzDETH/jXAkYXU6L02ljLT72oBMzZVe7rg7CQBwrfnc1/nY0jzZK4FSwx0JSUHuNZzCgpeWQM8PvjVQ3EmNJnEVc6XUBQBYZljS4L4bGWwfa9FAX4ESvPBYLV9B9DwCNVwfSbj0JBIXldRwJPCbZP+Q0XuF9+/5JFH5uzuCPpaaNAr3jxtXSZKFePJTB7rqUh984qb2e2cmY8Hqtt405NBQausnxkk5WvLVHIWjGCguBrwppNrRdcAUkBx0wJEdKlGYTrYRLjkv7gyQZMS4B6muiX++XZZfo21TiRg07PgnPf8O2Ph3gbACRXbJulEtssfjPx0ReNQfjqEob7/fjCweuHg+W5Amf6odvVEXcR4LZN9gqI5CLgmlDubH9nh7FD+tBk4m7JPp1NKUhtSwL8bqCE4MSgJFH7TJ9kfHxqo4GxQ972gI8vdrAvZE4M3+TIa+zpsx9a5qpKlyItM48fwNX6EVSWyGfma4KMIAgu7gbetqG/r4+aNCsS2CQfO7n/CAiWCj835hIfxYyxWN7hq2mr/8ZOOU8WUwxBaEwCPs6vULvn3wkPJDtZBHKpzcOJnFucre2uuHdqaTydPnSvonGs/g0r4OKZXCZuEFidHNk6Y4famEkKDG7BM8fnjcc1UCssWqhwu/CbngZL+OWmBj+/RB2MYTuWXJAcAV0Yz/Kpq8Jqbf3a9hx/HccTt+bYpwFxrp8SrP4mNlgiJE6JtvCdgW+j0c+Hj4zVbNp35SJxMQLO8ZX8pAqRlu6MP+IDLnjfxdlzwU72sEQgG1upWFXA+NlJKuo7b/TGFRtmOEx4nOVDr5jsf4KUNwEnFlihKP/ik+Z4x6PyhI0Cj8pMLlrokRrxi3yh33yjjI/h7lOwjZdqK+cWV8x2fydGz2SwfGVoOUk9X4kbMuan1e6buvh3DB8e0+99vhj89usv/w+6eIb7ytBeBgAAAABJRU5ErkJggg==

why it generate PNG file successfully, but why it can't be opened? why the PNG file is corrupt?

UPDATE : here's my complete jquery script

    $(".pepe-thumbnail").click(function(){
        var pepe_src = $(this).attr("src");
        $("#canvasimg").attr("src", pepe_src);
    });

    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    var deviceWidth = window.innerWidth;;

    canvasWidth = deviceWidth - 40;
    canvasHeight = deviceWidth - 40;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    if (canvas.width > 500 || canvas.height > 500){
        canvas.width = 560;
        canvas.height = 500;    
    }

    var img = document.getElementById("canvasimg");
    //imgx = canvas.width/2 - img.width/2;
    //imgy = canvas.height/2 - img.height/2;

    imgx = 0;
    imgy = 0;

    function runLoop(){             
        ctx.lineWidth  = 8;
        ctx.font = "26pt Lato";
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.lineJoin = "round";

        var text1 = document.getElementById("canvastext-top").value;
        //text1 = text1.toUpperCase();

        var text2 = document.getElementById("canvastext-bottom").value;
        //text2 = text2.toUpperCase();

        x = canvas.width/2;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, imgx, imgy, canvas.width, canvas.height);

        ctx.strokeText(text1, x, 50);
        ctx.fillText(text1, x, 50);

        ctx.strokeText(text2, x, (canvas.height - 40));
        ctx.fillText(text2, x, (canvas.height - 40));

        window.setTimeout(runLoop, 14);
    };
    runLoop();

    $(".img-download").click(function(){
        var data = canvas.toDataURL();
        alert (data);
    });

I have attempted to convert the base64 manually but, apparently, it is not a valid base64 string. Are you sure what you are getting is correct? Try and set the `` src to that base64 string, if the correct image appears then it rules that out. Just an idea to isolate where the problem may lie — wmash, Jun 17 '16 at 09:55

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

Try this :

$(".img-download").click(function(){
    var data = canvas.toDataURL();
    $(this).attr("href",data)
  $(this).attr("download","imgName.png");
});

Ref:Download canvas image using JS Jquery

edited May 23 '17 at 12:18

Community

1
1

answered Jun 17 '16 at 09:59

Shweta Matkar

301
1
11

WOW, It works bro... I don't know how you do that, but it works! thanks a lot – Saint Robson Jun 17 '16 at 10:22

score 0 · Answer 2 · edited Jun 17 '16 at 10:06

0

var data = canvas.toDataURL();
dataURL = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
dataURL = dataURL.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

var aTag = document.createElement('a');
aTag.download = 'download.png';
aTag.href = dataURL;
aTag.click();

edited Jun 17 '16 at 10:06

ADreNaLiNe-DJ

4,787
3
26
35

answered Jun 17 '16 at 09:59

Soke91

1
1

Please add some explanations of your "solution". – ADreNaLiNe-DJ Jun 17 '16 at 10:00
While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 17 '16 at 12:05

Image On HTML Canvas Can't Be Downloaded

2 Answers2

Linked