畫布無法正確另存為圖像，只是空白的透明圖像

Question

我正在遍歷一系列圖像元素（來自本地文件夾），並將它們附加到畫布上，最后我想將畫布另存為圖像，但未正確保存。 生成的圖像與畫布的尺寸匹配，但這只是空白的透明圖像。

如果在test.js我不將畫布保存到圖像，而是使用resolve(canvas) ，則可以在index.html完美顯示它，因此我知道畫布編寫正確。

Google Chrome控制台中也沒有顯示錯誤消息。

Test.js

class Test {
    constructor() {}

    createPoster(images) {
        return new Promise((resolve, reject) => {
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');

            let locX = 0;

            for (let i = 0, len = images.length; i < len; ++i) {
                let image = images[i];

                image.onload = () => {
                    ctx.drawImage(image, locX, 0);
                    locX += image.width;
                };
            }

            let poster = new Image();
            poster.crossOrigin = 'anonymous';

            poster.onload = () => {
                resolve(poster);
            };

            poster.src = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        });
    }
}

的index.html

<script type="module">
    const Test = require('./test.js');

    let test = new Test();

    async function main() {
       // let images = Get array of image elements from another library.
        let poster = await test.createPoster(images).catch((err) => console.log(err));

        document.body.appendChild(poster); // Displays just a transparent image with the same dimensions as the canvas.
    }
</script>

Answer 1

創建海報圖像之前，需要檢查所有加載的圖像。

createPoster(images) {
  return new Promise((resolve, reject) => {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    let locX = 0;
    let imageLoaded = 0;

    for (let i = 0, len = images.length; i < len; ++i) {
      let image = images[i];

      image.onload = () => {
        ctx.drawImage(image, locX, 0);
        locX += image.width;
        imageLoaded++;
        if (imageLoaded == len) {
          let poster = new Image();
          poster.crossOrigin = 'anonymous';
          poster.onload = () => {
            resolve(poster);
          };
          poster.src = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        }
      };

      // image.src = ..
    }

  });
}