Холст вообще не скачивается

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

Ничего не происходит, потому что вы ничего не делаете с "загрузкой".
Предполагая, что var download = document.getElementById("download"); get - это тег ссылки / якоря ...
Затем вы получаете изображение и устанавливаете атрибут 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);
*/

}

Answer 2

Проблема связана с обработчиком onclick для тега привязки:

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

в предоставленном вами JS, download не является функцией, это переменная ссылка на элемент DOM.

Вы также не должны добавлять новый dataURL в привязку по щелчку - вы должны извлечь dataURL из холста и установить атрибут href при загрузке или при изменении приложения, когда dataURL необходимо обновить. получение dataURL холста и установка href для события onclick приведут к запуску начального 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);