Webassembly compilation of ImageMagick
npm install wasm-imagemagickwasm-imagemagick comes with some easy to use APIs for creating image files from urls, executing multiple commands reusing output images and nicer command syntax, and utilities to handle files, html images, input elements, image comparison, metadata extraction, etc. Refer to API Reference Documentation for details.
ts
import { buildInputFile, execute, loadImageElement } from 'wasm-imagemagick'
const { outputFiles, exitCode} = await execute({
inputFiles: [await buildInputFile('http://some-cdn.com/foo/fn.png', 'image1.png')],
commands: [
'convert image1.png -rotate 70 image2.gif',
// heads up: the next command uses 'image2.gif' which was the output of previous command:
'convert image2.gif -scale 23% image3.jpg',
],
})
if(exitCode !== 0)
await loadImageElement(outputFiles[0], document.getElementById('outputImage'))
`
$3
This other example executes identify command to extract information about an image. As you can see, we access stdout from the execution result and check for errors using exitCode and stderr:
`ts
import { buildInputFile, execute } from 'wasm-imagemagick'
const { stdout, stderr, exitCode } = await execute({
inputFiles: [await buildInputFile('foo.gif')],
commands: identify foo.gif
})
if(exitCode === 0)
console.log('foo.gif identify output: ' + stdout.join('\n'))
else
console.error('foo.gif identify command failed: ' + stderr.join('\n'))
`
$3
As demonstration purposes, the following example doesn't use any helper provided by the library, only the low level call() function which only accept one command, in array syntax only:
`js
import { call } from 'wasm-imagemagick'
// build an input file by fetching its content
const fetchedSourceImage = await fetch("assets/rotate.png")
const content = new Uint8Array(await fetchedSourceImage.arrayBuffer());
const image = { name: 'srcFile.png', content }
const command = ["convert", "srcFile.png", '-rotate', '90', '-resize', '200%', 'out.png']
const result = await call([image], command)
// is there any errors ?
if(result.exitCode !== 0)
return alert('There was an error: ' + result.stderr.join('\n'))
// response can be multiple files (example split) here we know we just have one
const outputImage = result.processedFiles[0]
// render the output image into an existing
element
const outputImage = document.getElementById('outputImage')
outputImage.src = URL.createObjectURL(outputImage.blob)
outputImage.alt = outputImage.name
`
Importing the library in your project
$3
`sh
npm install --save wasm-imagemagick
`
**IMPORTANT:
Don't forget to copy magick.wasm and magick.js files to the folder where your index.html is being served:
`sh
cp node_modules/wasm-imagemagick/dist/magick.wasm .
cp node_modules/wasm-imagemagick/dist/magick.js .
`
Then you are ready to import the library in your project like this:
`ts
import { execute} from 'wasm-imagemagick'
`
or like this if you are not using standard modules:
`ts
const execute = require('wasm-imagemagick').execute
`
$3
If you are not working in a npm development environment you can still load the library bundle .js file. It supports being imported as JavaScript standard module or as a UMD module.
#### Importing magickApi.js as a JavaScript standard module:
Basic version, just reference online https://knicknic.github.io/wasm-imagemagick/magickApi.js no files needed at all.
See samples/rotate#code.
Relevant portions called out below "..." means code is missing from example
`html
`
Working example source code.
#### Below examples need additional files coppied:
Copy magick.js, magick.wasm in the same folder as your html file.:
#### Importing a bundle as a JavaScript standard module:
`html
`
Working example source code
#### Using the UMD bundle in AMD projects (requirejs)
`html