Question

所以我试图下载画布，但是当我单击按钮时，什么也没发生。

JS：

function download() {
var download = document.getElementById("download");
var image = document.getElementById("canvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","canvas.png");
}

HTML：

<div id="saveButton""><a href="#" onclick="download()">Download Image</a></div>

Answer 1

问题在于锚标记上的onclick处理程序：

<a href="#" onclick="download()">Download Image</a>

在您提供的JS中，download不是函数，它是对DOM元素的变量引用。

您也不应该在单击时将新的dataURL添加到锚点-您应该从画布中提取dataURL并在加载或需要更改dataURL的应用程序更改时设置href属性。获取画布的dataURL并在onclick事件上设置href将导致触发初始href（#）而不是新的dataURL。您还需要将锚点设置为具有download属性，以表示它是要下载的，而不是作为单独的资源请求的。

这应该是您所需要的：

HTML：

<div id="saveButton"">
    <a href="#" id="download-anchor" download>Download Image</a>
</div>

JS：

const downloadEl = document.getElementById('download-anchor');
const canvasData = document.getElementById("canvas").toDataURL("image/png").replace("image/png", "image/octet-stream");
downloadEl.setAttribute('href', canvasData);

Answer 2

什么都没有发生，因为您对“下载”不做任何事情。
假设var download = document.getElementById("download");得到一个链接/锚标记...
然后，您获得了图像并设置了href属性。...但是什么也没有，您只有一个引用该图像的锚标记。.
您需要单击它。

添加此行： download.click();。

这是我用来拍摄Three.js场景的屏幕截图的功能：

function takeScreenshot() {

    // open in new window like this
    //
    var w = window.open('', '');
    w.document.title = "Screenshot";
    //w.document.body.style.backgroundColor = "red";
    var img = new Image();
    // Without 'preserveDrawingBuffer' set to true, we must render now
    renderer.render(scene, camera);
    img.src = renderer.domElement.toDataURL();
    w.document.body.appendChild(img);  

/*
    // download file like this.
    //
    var a = document.createElement('a');
    // Without 'preserveDrawingBuffer' set to true, we must render now
    renderer.render(scene, camera);
    a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
    a.download = 'canvas.png'
    a.click();
*/

/*
    // New version of file download using toBlob.
    // toBlob should be faster than toDataUrl.
    // But maybe not because also calling createOjectURL.
    //
    renderer.render(scene, camera);
    renderer.domElement.toBlob(function(blob){
        var a = document.createElement('a');
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = 'canvas.png';
      a.click();
    }, 'image/png', 1.0);
*/

}

画布根本不下载

2 个答案: