JavaScript Promise 返回数组却显示 undefined 如何解决？

javascript promise 返回数组却显示 undefined 的问题

在使用 promise 返回数组时遇到无法访问数组元素的问题，可以通过以下方式解决：

let element = document.querySelectorAll('.test');
let promise = new Promise((resolve, reject) => {
  let imgs = [];
  for (var i = 0; i < element.length; i++) {
    html2canvas(element[i], {
      useCORS: true,
      allowTaint: false,
      logging: true,
    })
      .then(function (canvas) {
        let ctx = canvas.getContext('2d');
        let page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = canvas.height;
        page.getContext('2d').putImageData(
          ctx.getImageData(0, 0, canvas.width, canvas.height),
          0,
          0
        );
        imgs.push(page.toDataURL('image/jpeg', 1.0));
      })
      .then(() => {
        if (imgs.length === element.length) {
          resolve(imgs);
        }
      });
  }
});
promise.then((e) => {
  console.log(e, e.length);
});

修改后要将 resolve(imgs) 移动到 imgs.push(page.todataurl('image/jpeg', 1.0)) 语句后面。此外，还需要在 then 中判断 imgs 数组的长度是否等于 element 的长度，如果相等则调用 resolve，否则不调用。这样可以确保只有所有图片都加载完成后才返回数组。