如何從一個頁面保存多個畫布

Question

我有一個頁面，其中有多個畫布。 我有一個功能，可以一次保存每個畫布。 該函數如下所示：

<button onclick="download()">Download</button>
<script>
    function download() {
        var link = document.createElement('a');
        link.download = "pass.jpg";
        link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        link.click();
    }
</script>

如果最多可容納10個畫布，這是可以的，但是如果我的頁面有200個畫布可供下載，則單擊200個按鈕以全部下載將是一個問題。 我試圖創建一個可以一次保存頁面中所有畫布的函數，但是它不能正常工作。 這是我的代碼：

<button onclick="download()">Download</button>
<script>
    function download() {
        var images = document.getElementById("canvas");
        var srcList = [];
        var i = 0;

        setInterval(function() {
            if (images.length > i) {
                srcList.push(images[i].src);
                var link = document.createElement("a");
                link.id = i;
                link.download = "pass.jpg";
                link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                link.click();
                i++;
            }
        }, 1500);
    }
</script>

如何修改此代碼以獲得所需的結果？

Answer 1

更改的getElementById到的getElementsByTagName獲得在陣列中的所有畫布元素。 並添加clearInterval以停止循環，如@PHPglue所述

var images = document.getElementsByTagName("canvas");
var srcList = [];
var i = 0;

var timer = setInterval(function(){
    if(images.length > i){
        var link = document.createElement("a");
        srcList.push(images[i].src);
        link.id = i;
        link.download = "pass.jpg";
        link.href = images[i].toDataURL("image/png").replace("image/png", "image/octet-stream");
        link.click();
        i++;
    } else {
        clearInterval(timer);
    }
},1500);