画布无法正确另存为图像，只是空白的透明图像

Question

I'm looping through an array of image elements (from a local folder) and attaching them to a canvas and at the end I would like to save the canvas as an image but it is not being saved properly. The resulting image matches the dimensions of the canvas but it is just a blank transparent image.

If in test.js I don't save the canvas to an image and I instead use resolve(canvas) I can display it perfectly in index.html so I know that the canvas is being written properly.

There are also no error messages displayed in the Google Chrome console.

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

You need to check for all image loaded before you create your poster image.

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 = ..
    }

  });
}