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 indeed I had few extra layers of promises that I just intuitively added for the callbacks. But still even after removing them the image that was names as "jpg-that-does-not-work" is still throwing same error:

Error: instance is disposed
at get _instance [as _instance] (@imagemagick_magick-wasm.js?v=8cb72d82:4780:67)
at set quality [as quality] (@imagemagick_magick-wasm.js?v=8cb72d82:5931:65)

Updated code:

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());
  const file = ImageMagick.read(sourceBytes, (magicFile) => {
    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);
    return magicFile.write(format, (dataArray) => {
      if (!dataArray.length) throw new Error('Error while writing!');
      return new File([dataArray], originalFile.name, {
        type: 'image/jpeg',
      });
    });
  });
  return { file, extension: '.jpg', originalFile };
};

Files is used to test are the same.

Is there still something wrong 🤔

[dlemstra]

It looks like you are running out of memory. The native wasm binaries are x86 and this means your memory is limited to 4gb. With those large images the ImageMagick library needs to allocate a lot of memory. When this fails the result of the native call is 0 but no exception is raised. Thanks for reporting this. I think I will need to add an extra check for this and report an out of memory error.

[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.

[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 😅 .