Using magick-wasm in the browser without node.js? #112

UnluckyForSome · 2023-10-13T12:31:14Z

UnluckyForSome
Oct 13, 2023

Hi

I'm trying to import magick.wasm to use within my own javascript, without using node.js - but it doesn't seem to be working.

Downloading the library gives me 4 files:

index.d.ts, index.mjs, index.umd.js and magick.wasm

I've tried both using index.umd.js and a "browserified" bundle of index.mjs and index.umd.js but so far no luck

I have my HTML like so to see if the Magick functions are being imported:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Magick-WASM Example</title>
    <script type='module'>
        //import the library to talk to imagemagick
        import * as Magick from './index.umd.js';
        console.log(Object.keys(Magick));
      </script>
  </head>
  <body></body>
</html>

...but the array is returning empty. I must be doing something wrong. Is there any way to do this without using npm/node.js?

dlemstra · 2023-10-13T13:05:32Z

dlemstra
Oct 13, 2023
Maintainer

It looks like that import alias doesn't work? I had to use this instead:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Magick-WASM Example</title>
    <script type="module">
        //import the library to talk to imagemagick
        import * as foo from '/index.umd.js';
        console.log(window['magick-wasm']);
      </script>
  </head>
  <body></body>
</html>

1 reply

UnluckyForSome Oct 13, 2023
Author

Thankyou very much for your help. Although this gives me an object with AlphaOption, AutoThresholdMethod etc etc, Unfortunately I still can't seem to call the same functions as in your example, for instance in your example you have

initializeImageMagick(wasmLocation).then(() => {
    console.log(Magick.imageMagickVersion);
    console.log('Delegates:', Magick.delegates);
    console.log('Features:', Magick.features);

However trying to emulate the same in my version:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Magick-WASM Example</title>
    <script type="module">
        //import the library to talk to imagemagick
        import * as foo from './index.umd.js';
        console.log(window['magick-wasm']);
	console.log('Version:', foo.imageMagickVersion);
        console.log('Delegates:', foo.delegates);
        console.log('Features:', foo.features);
      </script>
  </head>
  <body></body>
</html>

Gives the output:

GET
https://mywebsite.com/magickwasm/index.umd.js
[HTTP/3 200  70ms]

Object { AlphaOption: {…}, AutoThresholdMethod: {…}, ... }
[magickwasm:8:17]
Version: undefined
Delegates: undefined
Features: undefined

I must be missing something very obvious, apologies! Any help is greatly appreciated. Kind regards,

dlemstra · 2023-10-14T18:19:54Z

dlemstra
Oct 14, 2023
Maintainer

The magick-wasm variable is the whole module. You will need to do something like this:

const magickModule = window['magick-wasm'];
await magickModule.initializeImageMagick();
const magick = magickModule.Magick;
console.log(magick.delegates);

5 replies

UnluckyForSome Oct 15, 2023
Author

Thankyou very much for your help! I think I may be almost there, with your help I've got magick.wasm successfully loading! However, I'm trying to emulate your demo.ts by simply reading example.png located within the same directory:

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8" />
    <title>Magick-WASM Example</title>

    <script type="module">
        // Import the library to talk to imagemagick
        import * as foo from './index.umd.js';
        const magickModule = window['magick-wasm'];

        // Initialize
        await magickModule.initializeImageMagick();

        // Declare Magick and ImageMagick
        const Magick = magickModule.Magick;
        const ImageMagick = magickModule.ImageMagick;
      
        // Read image
        const inputImage = await fetch('./input.png');
        const inputImageBlob = await inputImage.blob();
        const inputImageBuffer = await inputImageBlob.arrayBuffer();
        const image = ImageMagick.read(inputImageBuffer);

        // Print image buffer to console
        console.log(image);
      </script>

  </head>
  <body>
  </body>
</html>

Unfortunately I am getting

Uncaught Error: NoDecodeDelegateForThisImageFormat `' @ error/blob.c/BlobToImage/460

If I include console.log('Delegates:', Magick.delegates);, PNG is listed in the console. Am I missing another import somewhere?

Thankyou very much for your help.

dlemstra Oct 15, 2023
Maintainer

I suspect this is has to do with how you are reading the bytes or maybe it's not a png file? Can you share the image you are using for testing?

UnluckyForSome Oct 15, 2023
Author

Thanks, I've tried with a .jpg as well as a .png and coming across the same error, so it must be how I'm reading the bytes? The fetch is succeeding, however interestingly if I change the code to try and fetch something that doesn't exist: const inputImage = await fetch('./jibberishdsfagfj.png'); I get a 404 but below am getting the same delegate format error!

dlemstra Oct 15, 2023
Maintainer

This works for me locally:

const response = await fetch('./input.png');
const buffer = await response.arrayBuffer();
const data = new Uint8Array(buffer);
ImageMagick.read(data, image => {
  console.log(image.toString());
});

Might be nice if I could automatically use a Uint8Array when the type is an ArrayBuffer but I will need to experiment if I can add this check,

UnluckyForSome Oct 19, 2023
Author

Thanks to your help so far, I've got basic image manipulations working!

EDIT: Previously a question but I worked it out, this is my preliminary working code for a simple hex change using just index.umd.js

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8" />
    <title>Magick-WASM Example</title>
    <script type="module">
        // Import the library to talk to imagemagick
        import * as theWholeLot from './index.umd.js';
        const entireMagickLibrary = window['magick-wasm'];

        // Initialize
        await entireMagickLibrary.initializeImageMagick();

        // Declare Magick and ImageMagick
        const Magick = entireMagickLibrary.Magick;
        const ImageMagick = entireMagickLibrary.ImageMagick;
        const MagickFormat = entireMagickLibrary.MagickFormat;
        const MagickColor = entireMagickLibrary.MagickColor
      
        // Read image
        const response = await fetch('./FRAME_0001.bmp');
        const buffer = await response.arrayBuffer();
        const data = new Uint8Array(buffer);
        ImageMagick.read(data, image => {
          image.opaque(new MagickColor("#001582"), new MagickColor("#690B00"));
          image.write(MagickFormat.Png, data => {
            const blob = new Blob([data], { type: 'image/bmp' });

            // Create a download link
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'output.bmp';
            downloadLink.textContent = 'Download output.bmp';

            // Append the download link to the document
            document.body.appendChild(downloadLink);
          });
        });
        </script>
  </head>
  <body>
  </body>
</html>

I'll post back here if I need any more help (which i'm sure you'll love hehe)

sekoyo · 2024-02-03T11:28:11Z

sekoyo
Feb 3, 2024

Has anyone managed to import with a bundler (vite, also using vite-plugin-wasm in case that helps)?

I tried:

import magickWasm from '@imagemagick/magick-wasm/magick.wasm?init'
// import magickWasm from '@imagemagick/magick-wasm/magick.wasm?raw'

initializeImageMagick(magickWasm)...

And some variations but everything I've tried causes exceptions

1 reply

Peeterush Feb 6, 2024

For Vite, you can use this:

import { initializeImageMagick } from '@imagemagick/magick-wasm';
import magickWasm from '@imagemagick/magick-wasm/magick.wasm?url';

await initializeImageMagick(new URL(magickWasm, import.meta.url));

You can get rid of the ?url part at the end of the import statement by adding assetsInclude: ['**/*.wasm'] in vite.config.ts.
Then, to make TypeScript stop whining that it can't find code there, add declare module '*.wasm'; to a .d.ts file. This declaration file should of course be included in your tsconfig.json's compilerOptions.types.

sayhicoelho · 2024-10-04T03:26:39Z

sayhicoelho
Oct 4, 2024

I know I'm late, but this is what I'm doing to use this awesome library on my NextJS project:

ImageMagickService.js

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

let initializing = false
let initialized = false

async function load() {
  if (initializing) {
    // Wait until the first load execution is complete...
    while (true) {
      await delayed(500)

      if (!initializing && !initialized) {
        break
      } else if (initialized) {
        return
      }
    }
  }

  initializing = true

  try {
    const response = await fetch(process.env.NEXT_PUBLIC_IMAGE_MAGICK_WASM_URL, {
      cache: 'force-cache'
    })

    await initializeImageMagick(await response.arrayBuffer())

    initialized = true
    initializing = false
  } catch (err) {
    initializing = false
    throw err
  }
}

export async function extractGIFFrames(file, maxFrameSize = 150, signal) {
  if (!initialized) {
    await load()
  }

  if (signal?.aborted) {
    throw new Error('Aborted')
  }

  const buffer = await file.arrayBuffer()
  const data = new Uint8Array(buffer)

  return new Promise(resolve => {
    const blobs = []

    ImageMagick.readCollection(data, async frames => {
      frames.coalesce() // Fix GIF frames artifacts

      frames.forEach(frame => {
        const geometry = new MagickGeometry(maxFrameSize)

        geometry.greater = true

        frame.resize(geometry)

        const blob = await new Promise(resolve => {
          frame.write(MagickFormat.Jpeg, data => {
            const blob = new Blob([data], { type: 'image/jpeg' })
            resolve(blob)
          })
        })

        blobs.push(blob)
      })

      resolve(blobs)
    })
  })
}

0 replies

MantasMikal · 2024-10-04T13:47:43Z

MantasMikal
Oct 4, 2024

I was able to get it working on Nextjs 14:

Update nextjs.config webpack settings to load wasm files

  webpack: (config) => {
    const experiments = config.experiments || {}
    config.experiments = { ...experiments, asyncWebAssembly: true }
    config.output.assetModuleFilename = 'static/[hash][ext]'
    config.output.publicPath = '/_next/'
    config.module.rules.push({
      test: /\.wasm/,
      type: 'asset/resource'
    })
    return config
  }

Load Wasm like this

  public async initMagick(): Promise<void> {
      const magickWasm = await import('@imagemagick/magick-wasm/magick.wasm');
      const magickBuffer = await fetch(magickWasm.default).then((res) => res.arrayBuffer());
      await initializeImageMagick(magickBuffer);
  }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using magick-wasm in the browser without node.js? #112

{{title}}

Replies: 5 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Using magick-wasm in the browser without node.js? #112

UnluckyForSome Oct 13, 2023

Replies: 5 comments · 7 replies

dlemstra Oct 13, 2023 Maintainer

UnluckyForSome Oct 13, 2023 Author

dlemstra Oct 14, 2023 Maintainer

UnluckyForSome Oct 15, 2023 Author

dlemstra Oct 15, 2023 Maintainer

UnluckyForSome Oct 15, 2023 Author

dlemstra Oct 15, 2023 Maintainer

UnluckyForSome Oct 19, 2023 Author

sekoyo Feb 3, 2024

Peeterush Feb 6, 2024

sayhicoelho Oct 4, 2024

MantasMikal Oct 4, 2024

UnluckyForSome
Oct 13, 2023

Replies: 5 comments 7 replies

dlemstra
Oct 13, 2023
Maintainer

UnluckyForSome Oct 13, 2023
Author

dlemstra
Oct 14, 2023
Maintainer

UnluckyForSome Oct 15, 2023
Author

dlemstra Oct 15, 2023
Maintainer

UnluckyForSome Oct 15, 2023
Author

dlemstra Oct 15, 2023
Maintainer

UnluckyForSome Oct 19, 2023
Author

sekoyo
Feb 3, 2024

sayhicoelho
Oct 4, 2024

MantasMikal
Oct 4, 2024