javascript - Canvas.toBlob() 未下载一些 PNG 和非常高质量的 JPG

Question

我一直在使用此代码从 Canvas 下载图像:

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>';    

        }

错误:未捕获引用错误:fileSave1 中未定义 url。

谢谢

Answer 1

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

看起来第二个代码片段几乎可以工作，但是有一些地方不合适。

我相信这会起作用:

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() 成为 anchor 元素，因此调用函数 fileSave1() 将立即下载文件，而不是向文档添加 anchor 以供用户单击。如果您愿意，您可以更改此行为。