Vue foreach 循环将canvas生成图片如何同步并且push 到数组中，并且foreach 循环后可以return所以push的数据

你可以使用 Promise 和 async/await 来实现 Vue foreach 循环将canvas生成图片同步并且push到数组中的操作。具体步骤如下：

1. 在 foreach 循环中使用 Promise 将生成图片的操作包装成异步操作。

2. 使用 async/await 来等待异步操作完成，并将生成的图片 push 到数组中。

3. 在 foreach 循环结束后，使用 Promise.all() 将所有异步操作的结果合并为一个 Promise 对象，并使用 await 等待所有异步操作完成。

4. 在 Promise.all() 完成后，return push 到数组中的所有生成的图片。

以下是示例代码：

async function generateImages() {
  const images = [];
  await Promise.all(
    yourArray.forEach(async (item) => {
      const canvas = await generateCanvas(item); // 生成 canvas
      const image = canvas.toDataURL(); // 将 canvas 转换成图片
      images.push(image); // 将图片 push 到数组中
    })
  );
  return images; // 返回生成的图片数组
}

其中 `generateCanvas(item)` 函数是生成 canvas 的操作函数，你需要自己实现这个函数。