如何使用javascript下载多个图片

how to download multiple images onload using javascript?

本文关键字：下载 何使用 javascript      更新时间：2023-09-26

我正在尝试更改多个图像，我正在单独的画布上绘制图像，并修改像素，然后我想在修改后下载它们。我有一个将画布转换为图像的函数，并且我将所有新画布保存在一个数组中。当我尝试迭代数组并下载每个画布时，实际上只有最后一个图像被下载，而不是全部，即使它们实际上都存在于我的数组中，我在加载网页后在Chrome控制台检查了这一点。这是我下载图片的代码:

for (i = 0; i < numImages; i++) {
    Canvas2Image.saveAsJPEG(canvases[i], canvases[i].width, canvases[i].height);
  }

和我也得到以下错误在控制台:

资源被解释为文档，但以MIME类型image/octet-stream传输:

我不能改变MIME类型，但我不认为这是问题，因为代码成功下载了正确格式的最后一张图像。

我还尝试调用保存图像的函数:1. window2. 当DOMcontentLoaded3.在我的HTML页面的主体中4. document.onload

以上都没有下载超过最后一个图像。我遗漏了什么?

如果您查看Canvas2Image源代码，您可以看到saveAsJPEG工作通过更改url href，见https://github.com/hongru/canvas2image/blob/master/canvas2image.js#L47

我猜浏览器延迟了实际的位置href更新，直到javascript执行完成。

尝试在超时时间内执行文件保存，以便每个保存都能独立运行，如下所示:

for (i = 0; i < numImages; i++) {
   (function(c,w,h) {   // wrapping in a function to avoid timeout using the same final value of `i`
      setTimeout(function() {
         Canvas2Image.saveAsJPEG(c,w,h);
      }, i*2000);
    })(canvases[i], canvases[i].width, canvases[i].height);
  }
相关文章：