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

如何从页面保存多个画布

1 个答案: