wasm-imagemagick

This utility is based off the WASM-ImageMagick library.

Inspiration for creating this tool came from the need to support mobile devices.

Support for node and shell environments has been dropped in order to reduce the footprint of the generated emscripten glue code for faster load times on mobile.

Also this utility does not have a built in web worker abstraction, allowing the developer to control concurrence and worker termination, since battery life is a concern with mobile development.

It is HIGHLY recommended to run this code in a Web Worker thread! I suggest using the wonderful Comlink library, to make working with Web Workers a breeze.

Api

Since ImageMagick can work with multiple input image files, magick accepts an array of file items. This must coincide with the number of input files in the commands array.

inputName and outputName tell magick where to read/write to the virtual File System stub provided by emscripten, since this is how ImageMagic handles files in an OS environment.

commands are identical to the standard ImageMagic commands api.

magick outputs a File object for convert and mogrify processes. An array of one or more strings is returned for identify processes.

Example usage.

npm install --save @longlost/wasm-imagemagick

or

yarn add @longlost/wasm-imagemagick

// processor.js

import magick from '@longlost/wasm-imagemagick/wasm-imagemagick.js';

const processor = async file => {
  try {

    // This example creates a new image in an attempt to reduce 
    // the file size without sacrificing too much fidelity.
    
    const inputName  = file.name;  
    const outputName = `small_${file.name};
    const fileItem   = {file, inputName};

    const commands  = [
      'convert', inputName,
      '-auto-orient',
      '-sampling-factor', '4:2:0',
      '-strip', 
      '-auto-gamma', 
      '-adaptive-resize', '60%', 
      '-quality', '82', 
      '-unsharp', '0x0.75+0.75+0.008', 
      outputName
    ];

    const processedFile = await magick({
      commands,
      fileCollection: [fileItem], 
      outputName,
      outputType: file.type
    });

    return processedFile;
  } 
  catch (error) {
    // Do something clever with the error...
  }
};

export default processor;


// app.js

import processor from './processor.js';

(async function() {

  const file = someJSFileObject; /* Procure a Javascript File Object. */
  
  const processed = await processor(file);

  const tempUrl = window.URL.createObjectURL(processed);  
  const img     = document.querySelector('#my-image-element');
  
  img.onload = () => {
    window.URL.revokeObjectURL(tempUrl);
  };
  
  img.src = tempUrl;
  
}());