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

  });
}

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

1 个答案: