как сохранить несколько холстов со страницы

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