HTML画布上的图像无法下载。

Question

我有一个HTML画布，可以很好地显示图像。

我有以下jQuery代码来下载这个图像：

$(".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
});

这是我的下载按钮:

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

以下是"data"内容的描述：

这里是"data"的内容：

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

为什么生成PNG文件成功，但无法打开？为什么PNG文件损坏？

更新：这是我的完整jQuery脚本。

    $(".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);
    });

- Saint Robson

---

你能分享一个演示吗？ - Rayon

我尝试手动转换base64，但显然它不是有效的base64字符串。你确定你得到的是正确的吗？尝试将<img>的src设置为该base64字符串，如果正确的图像出现，则可以排除这种可能性。这只是一个隔离问题所在的想法。 - wmash

Answer 1

试试这个：

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

参考：使用JS Jquery下载画布图像

- Shweta Matkar

---

哇，太棒了，兄弟...我不知道你是怎么做到的，但它能用！非常感谢。 - Saint Robson

Answer 2

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();

- Soke91

---

请添加一些关于你“解决方案”的解释。 - ADreNaLiNe-DJ

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - Box Box Box Box