Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Feb 28, 2020
4 stars
Download the shape of a countryInput: draw points on imageCanvas equality by valueInput: Draw an arrow on an imageCalibrate a Three.js camera using fSpyHello fSpyMain Colors from ImageColors palette from imageCan I Use Media Fragments?Hello Cloudinary UploadColor by numberPixel-art or Voronoi image tesselationHello pixelitInput: draw a box on imageExtended drawImagedrawImage respects canvas transparencyCSS object-fit formulasobject-fitEvery Other Pixel Is A LineFake video playerPreload a list of imagesImage placeholderImage coverIdentify images with deterministic UUIDPerspective rectifier - examplePerspective rectifier
Async image loading, and CORS
Also listed in…
Network, cache and memoization
html`<img src="${src}" style="max-width: 300px" />`
afterOnload = src =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.crossOrigin = "anonymous";
img.src = src;
})
afterOnload(src).then(img => img.complete)
afterOnload(src).then(crop)
afterOnload(src).then(img => crop(img).toDataURL())
html`<img src="${await afterOnload(src).then(img =>
crop(img).toDataURL()
)}" style="max-width: 300px" />`
afterDecode = src => {
const img = new Image();
img.crossOrigin = "anonymous";
img.src = src;
return img.decode().then(() => img);
}
afterDecode(src).then(img => img.complete)
afterDecode(src).then(crop)
afterDecode(src).then(img => crop(img).toDataURL())
html`<img src="${await afterDecode(src).then(img =>
crop(img).toDataURL()
)}" style="max-width: 300px" />`
afterDecodeWithoutCORS = src => {
const img = new Image();
img.src = src;
return img.decode().then(() => img);
}
afterDecodeWithoutCORS(src).then(img => crop(img).toDataURL())
html`<img src="${await afterDecodeWithoutCORS(src).then(img =>
crop(img).toDataURL()
)}" style="max-width: 300px" />`
afterDecodeWithoutCORS(src).then(img => img.complete)
afterDecodeWithoutCORS(src).then(crop)
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.
