2c:null 2d:["$","title",null,{"children":"WASM-ImageMagick Helper | Radamés Ajna | Observable"}] 32:T490,md`# WASM-ImageMagick Helper This notebook experiments with the WASM port of the classical ImageMagick software, [WASM-ImageMagick](https://github.com/KnicKnic/WASM-ImageMagick). Input image source/blob, your imagemagick command and gets HTMLImageElement as an output ~~~js import { magickImage } from "@radames/wasm-imagemagick-helper" ~~~ ~~~js const output await magickImage(imageSource, { cmd: \`-rotate 45 -resize 50% \` }) ~~~ \`mode: "text"\` return pixels as string numbers read more about [:txt](https://legacy.imagemagick.org/Usage/files/#txt) used in this [notebook](https://observablehq.com/@radames/wasm-imagemagick-extract-color-palette-from-image) to extract color palette from a photo ~~~js const colorstext = await magickImage(imageSource, { cmd: \`+dither -colors 10 -unique-colors -colorspace HSL -depth 8\`, mode: "text" }); ~~~ **warning**: Unfortunately it seems like there is no way to cancel the Promise call that executes your imagemagick command with the WASM lib. This makes interactive notebooks, moving sliders, etc almost impossible. You can still use the lib, but make sure you're not running large files multiple times. `33:[] 30:{"id":"878c1eae88db1d00","slug":"wasm-imagemagick-helper","title":"WASM-ImageMagick Helper","thumbnail":"6ff27a712a6df5f6c4e8d94b213fe7d9dfa37672b82ba51fae13acc480042cd5","access_level":"public","create_time":"$D2020-11-28T04:25:36.936Z","update_time":"$D2022-02-13T06:59:19.965Z","view_time":null,"first_public_time":"$D2020-11-30T01:59:56.457Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":672,"publish_version":672,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"e33ecf7f9c2d8757","slug":"libs","title":"Libs","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"title":"WASM-ImageMagick Helper","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"viewof bt = button(\"random image\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof angle = {\n const s = html`

\nAngle\n\n45\n`;\n s.value = 45;\n\n s.input.oninput = e => {\n e && e.stopPropagation() && e.preventDefault();\n s.label.value = s.input.value;\n };\n s.input.onpointerup = e => {\n e.preventDefault();\n s.value = +s.input.value;\n s.dispatchEvent(new CustomEvent('input'));\n };\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"viewof scale = {\n const s = html`\nScale\n\n50%\n`;\n s.value = 0.5;\n\n s.input.oninput = e => {\n e && e.stopPropagation() && e.preventDefault();\n s.label.value = ~~(s.input.value * 100) + \"%\";\n };\n s.input.onpointerup = e => {\n e.preventDefault();\n s.value = +s.input.value;\n s.dispatchEvent(new CustomEvent('input'));\n };\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"magickImage(randomImageSrc, {\n cmd: `-rotate ${angle} -resize ${~~(scale * 100)}%`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"viewof colors = {\n const s = html`\n# colors dither\n\n10\n`;\n s.value = 10;\n\n s.input.oninput = e => {\n e && e.stopPropagation() && e.preventDefault();\n s.label.value = s.input.value;\n };\n s.input.onpointerup = e => {\n e.preventDefault();\n s.value = +s.input.value;\n s.dispatchEvent(new CustomEvent('input'));\n };\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"magickImage(randomImageSrc, {\n cmd: `-quantize HSL -colors ${colors} +dither`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"md`### Distortion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"viewof y1 = {\n const s = html`\ny1\n\n200\n`;\n s.value = 200;\n\n s.input.oninput = e => {\n e && e.stopPropagation() && e.preventDefault();\n s.label.value = s.input.value;\n };\n s.input.onpointerup = e => {\n e.preventDefault();\n s.value = +s.input.value;\n s.dispatchEvent(new CustomEvent('input'));\n };\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"viewof y2 = {\n const s = html`\ny2\n\n50\n`;\n s.value = 50;\n\n s.input.oninput = e => {\n e && e.stopPropagation() && e.preventDefault();\n s.label.value = s.input.value;\n };\n s.input.onpointerup = e => {\n e.preventDefault();\n s.value = +s.input.value;\n s.dispatchEvent(new CustomEvent('input'));\n };\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"magickImage(randomImageSrc, {\n cmd: `-matte -virtual-pixel transparent \\\n -distort Perspective \\\n '0,0,0,0 0,300,0,300 300,0,300,${y2} 300,300,300,${y1}'`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"magickImage(randomImageSrc, {\n cmd: `-virtual-pixel Black \\\n -distort Shepards '50,50 150,150 300,300 250,200\\\n 0,0 0,0 0,300 0,300 300,0 300,0 300,300 300,300 '\\\n +repage`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"magickImage(randomImageSrc, {\n cmd: `-interpolate nearest -virtual-pixel mirror -spread 10`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"async function magickImage(imageurl, opts = {}) {\n const {\n cmd = \"-rotate 30 -resize 100%\",\n mode = \"image\",\n verbose = false\n } = opts;\n\n const img = await fetchImage(imageurl);\n const arrayBuffer = await img.blob.arrayBuffer();\n const sourceBytes = new Uint8Array(arrayBuffer);\n const file = [{ name: 'input.png', content: sourceBytes }];\n\n const commands = `convert input.png ${cmd} ${\n mode === \"text\" ? \":txt out.txt\" : \"output.png\"\n }`;\n if (verbose) console.log(performance.now(), commands);\n const { outputFiles, exitCode } = await Magick.executeOne({\n inputFiles: file,\n commands\n });\n\n if (mode === \"image\") {\n const imgout = new Image();\n imgout.src = URL.createObjectURL(outputFiles[0].blob);\n imgout.blob = outputFiles[0].blob;\n return imgout;\n } else if (mode === \"text\") {\n const out = await Magick.readFileAsText(outputFiles[0]);\n return out;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"async function fetchImage(src) {\n const img = new Image();\n img.src = URL.createObjectURL(\n await fetch(src)\n .then(r => r.blob())\n .then(blob => (img.blob = blob))\n );\n await img.decode();\n return img;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"randomImageSrc = (bt,\nfetch(`https://source.unsplash.com/random/500x500`, {\n method: 'head'\n}).then(response => response.url))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"Magick = import(\"https://cdn.jsdelivr.net/npm/wasm-imagemagick@1.2.8/dist/magickApi.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"import { button, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"