Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published
Edited
Nov 30, 2020
Importers
6 stars
magickImage(randomImageSrc, {
cmd: `-rotate ${angle} -resize ${~~(scale * 100)}%`
})
magickImage(randomImageSrc, {
cmd: `-quantize HSL -colors ${colors} +dither`
})
magickImage(randomImageSrc, {
cmd: `-matte -virtual-pixel transparent \
-distort Perspective \
'0,0,0,0 0,300,0,300 300,0,300,${y2} 300,300,300,${y1}'`
})
magickImage(randomImageSrc, {
cmd: `-virtual-pixel Black \
-distort Shepards '50,50 150,150 300,300 250,200\
0,0 0,0 0,300 0,300 300,0 300,0 300,300 300,300 '\
+repage`
})
magickImage(randomImageSrc, {
cmd: `-interpolate nearest -virtual-pixel mirror -spread 10`
})
async function magickImage(imageurl, opts = {}) {
const {
cmd = "-rotate 30 -resize 100%",
mode = "image",
verbose = false
} = opts;
const img = await fetchImage(imageurl);
const arrayBuffer = await img.blob.arrayBuffer();
const sourceBytes = new Uint8Array(arrayBuffer);
const file = [{ name: 'input.png', content: sourceBytes }];
const commands = `convert input.png ${cmd} ${
mode === "text" ? ":txt out.txt" : "output.png"
}`;
if (verbose) console.log(performance.now(), commands);
const { outputFiles, exitCode } = await Magick.executeOne({
inputFiles: file,
commands
});
if (mode === "image") {
const imgout = new Image();
imgout.src = URL.createObjectURL(outputFiles[0].blob);
imgout.blob = outputFiles[0].blob;
return imgout;
} else if (mode === "text") {
const out = await Magick.readFileAsText(outputFiles[0]);
return out;
}
}
async function fetchImage(src) {
const img = new Image();
img.src = URL.createObjectURL(
await fetch(src)
.then(r => r.blob())
.then(blob => (img.blob = blob))
);
await img.decode();
return img;
}
Magick = import("https://cdn.jsdelivr.net/npm/wasm-imagemagick@1.2.8/dist/magickApi.js")
import { button, slider } from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
