Looking for a fancy way to focus an image? How about a pixelated image focus? In this recipe, we'll explore the art of image pixelation by looping through an algorithm that pixelates an image less and less until it's completely focused.
Note
WARNING: This recipe must be run on a web server due to security constraints with the getImageData()
method.
Follow these steps to create a pixilation function that slowly focuses an image:
Define the
focusImage()
function which de-pixelates an image based on a pixilation value:function focusImage(canvas, context, imageObj, pixelation){ var sourceWidth = imageObj.width; var sourceHeight = imageObj.height; var sourceX = canvas.width / 2 - sourceWidth / 2; var sourceY = canvas.height / 2 - sourceHeight / 2; var destX = sourceX; var destY = sourceY; var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight); var data = imageData.data; for (var...