如何使用javascript下载多个图像onload？

Question

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

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

我还在控制台中收到以下错误：

资源解释为 Document，但使用 MIME 类型 image/octet-stream 传输：

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

我还尝试调用保存图像的函数： 1.window.onload 2. DOMcontentLoaded 时 3.在我的html页面的正文中 4. 文件加载

以上下载的都没有超过最后一张图片。 我在这里错过了什么？

Answer 1

如果您查看 Canvas2Image 源代码，您可以通过更改 url href 看到 saveAsJPEG 的工作原理，请参阅 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);
  }