Question

我一直在使用此代码从画布下载图像：

function fileSave1() 
{
    var dataURL = "";
    var canvasSave = document.getElementById("cSave");
    if (document.getElementById("png").checked == true) dataURL = canvasSave.toDataURL(); // PNG is default 
    if (document.getElementById("jpg").checked == true) dataURL = canvasSave.toDataURL('image/jpeg', Number(document.getElementById("quality").value) / 100); // JPG with Quality Setting requires 2 arguments 
    //var start = dataURL.indexOf(";"); //start point will vary based on image/png (9 characters) vs image/jpeg (10 characters) 
    //dataURL = dataURL.slice(start); 
    //dataURL = "data:application/octet-stream" + dataURL; 
    if (document.getElementById("jpg").checked == true) document.getElementById("afterCanvas2").innerHTML = '<a download="new_image.jpg" href='+ dataURL +'>Save New JPG with a Quality Setting of ' + document.getElementById("quality").value + ' </a>';
    if (document.getElementById("png").checked == true) document.getElementById("afterCanvas2").innerHTML = '<a download="new_image.png" href='+ dataURL +'>Save New Full Quality PNG</a>';
}

然而，在Chrome中，它并没有下载一些PNG和非常高质量的JPG。 This post表明问题是文件大小太大，并建议使用canvas.toBlob（）作为解决方法。 This post有一个代码示例，但我无法使其适应我的代码。

我非常感谢有关正确语法的帮助。

谢谢

编辑：失败的代码：

        function fileSave1()
        {

            var canvas = document.getElementById('cSave');

            canvas.toBlob(function(blob)
            {
                var url = URL.createObjectURL(blob);
                url.onload = function() 
                {
                    URL.revokeObjectURL(url);
                };

            });

          document.getElementById("afterCanvas2").innerHTML = '<a download="new_image.png" href='+ url +'>Save New Full Quality PNG</a>';    

        }

错误：未捕获的ReferenceError：未在fileSave1中定义url。

谢谢

Answer 1

我很好奇您为什么要在第二个代码段中将onload处理程序附加到该网址？这不是您链接的帖子中接受的答案的一部分。

看起来第二个代码片段几乎可以正常工作，但有些事情不合适。

我相信这会奏效：

function fileSave1() {
  var canvas = document.getElementById('cSave');

  canvas.toBlob(function(blob) {
    const anchor = document.createElement('a')
    const url = URL.createObjectURL(blob)
    anchor.href = url
    anchor.download = 'canvas.png'
    document.body.appendChild(anchor)
    anchor.click()
    document.body.removeChild(anchor)
    URL.revokeObjectURL(url)
  }, 'image/png')
}

请注意，只要blob准备就绪，click()就是锚元素，因此调用函数fileSave1()将立即下载文件，而不是为用户添加锚文件点击。如果需要，可以更改此行为。

Canvas.toBlob（）没有下载一些PNG和非常高质量的JPG

1 个答案: