Getting "instance is disposed" or empty data array errors while handling some JPGs

[tremppu]

magick-wasm version

0.0.28

Description

When optimizing some JPGs I think the instance gets disposed before it's ready.

Steps to Reproduce

Here is a code snippet that works with most JPGs but not with some:

import {
  initializeImageMagick,
  ImageMagick,
  MagickFormat,
} from '@imagemagick/magick-wasm';

const wasmLocation = new URL(
  '@imagemagick/magick-wasm/magick.wasm',
  import.meta.url
);

interface MagicResponse {
  file: File;
  extension: string;
  originalFile: File;
}

interface ImageSettings {
  targetSize: number;
  width: number;
  height: number;
}

export const doMagic = async (
  originalFile: File,
  settings: ImageSettings
): Promise<MagicResponse> => {
  const { targetSize = 500, width = 3840, height = 3840 } = settings;

  await initializeImageMagick(wasmLocation);
  const sourceBytes = new Uint8Array(await originalFile.arrayBuffer());
  return new Promise((resolve) => {
    ImageMagick.read(sourceBytes, async (magicFile) => {
      const file = await new Promise<File>((resolveFile) => {
        const format = MagickFormat.Jpg;
        const targetSizeBytes = String(targetSize * 1024);
        const maxWidth = Math.min(width, magicFile.width);
        const maxHeight = Math.min(height, magicFile.height);
        magicFile.resize(maxWidth, maxHeight);
        magicFile.quality = 95;
        magicFile.settings.setDefine('jpeg:extent', targetSizeBytes);
        magicFile.write(format, (dataArray) => {
          if (!dataArray.length) throw new Error('Error while writing!');

          const asFile = new File([dataArray], originalFile.name, {
            type: 'image/jpeg',
          });
          resolveFile(asFile);
        });
      });

      return resolve({ file, extension: '.jpg', originalFile });
    });
  });
};

This code should result into "instance is disposed" but if the "magicFile.quality = 95" is commented out it results into empty data.

Images

Here is a Google Drive link since the image that is not working was too large for upload: https://drive.google.com/drive/folders/1KCeiBcSYQAh5zK2yaE4CmlJmgMYkm6aj
ps. large image is not the problem, I have been able to handle even larger files.

[netjerikh]

I can confirm there is an issue with 'big' images. If you draw @tremppu's image on a canvas, or save it in a different format, the new image will be cropped. It's like there's not enough memory to keep all the pixels.

[dlemstra]

This has to do with your excessive use of Promise in your code. You should not use that with the read and write methods because the magicFile and dataArray will be cleaned up when the method has been executed.

[tremppu]

Ok, thanks for the info! With that error I can hopefully somehow execute some plan B and get images optimized anyway :D

[tremppu]

Any update when a new release that adds the error might be coming up? 😅

[dlemstra]

There will probably be a new release in one or two weeks.

[iambumblehead]

The native wasm binaries are x86

Using an arm64 machine to type this and there are many arm64 laptops being released now. Hoping there will be arm releases.

[dlemstra]

The native wasm binaries are compiled to x86 because web assembly is only 32 bit at the moment. This is not something I can change.

[zhouyupeng]

I use this image in ImageMagick, and it doesn't work either, but in MozJPEG, it works.

[tremppu]

Saw that the update was available and went to test out the new error but for some reason did not get the error as the "jpg-that-does-not-work" now works with 0.0.29 (does not work with 0.0.28). 🤔 I have no idea what else was updated but anyway the problem is gone with that image and few others 😅 .