Question

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

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

我在控制台中也遇到以下错误：

资源被解释为文档但使用MIME类型image / octet-stream传输：

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

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

以上所有内容均未下载超过最后一张图片。我在这里缺少什么？

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

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

1 个答案: