Skip to content

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.