The avatar for @severo
Sylvain Lesage
Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Jan 11, 2021
5 stars
Image
Download the shape of a countryInput: draw points on image
Canvas equality by value
Input: 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 playerAsync image loading, and CORSPreload a list of imagesImage placeholderImage coverIdentify images with deterministic UUIDPerspective rectifier - examplePerspective rectifier
Also listed in…
TIL
Insert cell
Insert cell
original = getRandomCanvas()
Insert cell
Insert cell
different = getRandomCanvas()
Insert cell
original.toDataURL() === different.toDataURL()
Insert cell
Insert cell
same = cloneCanvas(original)
Insert cell
original.toDataURL() === same.toDataURL()
Insert cell
Insert cell
Insert cell
function isCanvasEqual(value, other) {
if (value.width !== other.width || value.height !== other.height) {
return false;
}
const valueImageData = value
.getContext('2d')
.getImageData(0, 0, value.width, value.height).data;
const otherImageData = other
.getContext('2d')
.getImageData(0, 0, other.width, other.height).data;
for (let i = 0; i < valueImageData.length; i += 1) {
if (valueImageData[i] !== otherImageData[i]) {
return false;
}
}
return true;
}
Insert cell
Insert cell
isCanvasEqual(original, different)
Insert cell
isCanvasEqual(original, same)
Insert cell
Insert cell
Insert cell
// we test for Uint32 equality
// instead of Uint8 equality, which reduces
// the number of iterations by four if
// the canvas is equal
function canvasUint32(canvas) {
return new Uint32Array(
canvas
.getContext('2d')
.getImageData(0, 0, canvas.width, canvas.height).data.buffer
);
}
Insert cell
function isArrayEqual(value, other) {
if (value.length !== other.length) {
return false;
}

for (let i = 0; i < value.length; i++) {
if (value[i] !== other[i]) {
return false;
}
}
return true;
}
Insert cell
isArrayEqual(canvasUint32(original), canvasUint32(different))
Insert cell
isArrayEqual(canvasUint32(original), canvasUint32(same))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more