Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pixelate images with canvas. Blog post: https://miguelmota.com/blog/pixelate-images-with-canvas/
// Create new image element.
var image = new Image();
// Set an image.
image.src = 'photo.png';
// Append image to body.
document.body.appendChild(image);
// After image has been loaded in memory invoke a callback.
image.onload = imageLoaded;
// Image loaded callback.
function imageLoaded() {
// Get the dimensions of loaded image.
var width = image.clientWidth;
var height = image.clientHeight;
// Create canvas element.
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
// This is what gives us that blocky pixel styling, rather than a blend between pixels.
canvas.style.cssText = 'image-rendering: optimizeSpeed;' + // FireFox < 6.0
'image-rendering: -moz-crisp-edges;' + // FireFox
'image-rendering: -o-crisp-edges;' + // Opera
'image-rendering: -webkit-crisp-edges;' + // Chrome
'image-rendering: crisp-edges;' + // Chrome
'image-rendering: -webkit-optimize-contrast;' + // Safari
'image-rendering: pixelated; ' + // Future browsers
'-ms-interpolation-mode: nearest-neighbor;'; // IE
// Grab the drawing context object. It's what lets us draw on the canvas.
var context = canvas.getContext('2d');
// Use nearest-neighbor scaling when images are resized instead of the resizing algorithm to create blur.
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// We'll be pixelating the image by 80% (20% of original size).
var percent = 0.2;
// Calculate the scaled dimensions.
var scaledWidth = width * percent;
var scaledHeight = height * percent;
// Render image smaller.
context.drawImage(image, 0, 0, scaledWidth, scaledHeight);
// Stretch the smaller image onto larger context.
context.drawImage(canvas, 0, 0, scaledWidth, scaledHeight, 0, 0, width, height);
// Here are what the above parameters mean:
// canvasElement, canvasXOffsetForImage, canvasYOffsetForImage, imageWidth, imageHeight, imageXOffset, imageYOffset, destinationImageWidth, destinationImageHeight
// Append canvas to body.
document.body.appendChild(canvas);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment