Let’s talk about pixelation, or the technique to apply web mosaics for image censoring
Let’s face reality: at least once in your life, you have looked for porn, or annoying popups have appeared on your screen, including pornographic content (that should make you think about what you searched to end up seeing that content). Admit it! Denial is the first step of loss, and you will lose this battle if you don’t admit it.
What does “pixelation” mean?
Pixelization (British English, pixelisation) or mosaic processing is any technique used in editing images or video, whereby an image is blurred by displaying part or all of it at a markedly lower resolution. It is primarily used for censorship.
Censor bars are a basic form of text, photography, and video censorship in which “sensitive” information or images are occluded by black, gray, or white rectangular boxes. These bars have been used to censor various parts of images.
When should you use the pixelation technique?
You should use the pixelation technique in any case where you have media content (such as images) with any reference that should not be displayed publicly. One of the most common cases is pornography, as it usually provides foregrounds of genitalia, intercourse or other types of situations that might not be appropriate for all audiences.
And how can you make it work easily?
I hope you were not expecting to find here an example for every language programming because I will not do it. But I can share with you a couple of examples (using JavaScript and PHP, the two main languages I currently use when I develop web apps):
How to apply pixelation using (web) JavaScript?
Given this pixelation technique will occur on the browser (visitors end) and not your server, please take this example lightly, as the user still might see the uncensored picture if they have JavaScript disabled in their browser (yes, I have tracked visitors that have JavaScript disabled).
The main point using JavaScript via web browser is you delegate the responsibility to the user’s device, so you free up your server resources sooner as you don’t need to process any content. The example below is based on vanilla JavaScript, so feel free to adapt it to your JS Framework (such as jQuery, Angular, Vue or any other javaScript framework):
// Here we are preparing some basic DOM elements that we will use.let canvas = document.createElement("canvas");
let canvasContext = canvas.getContext('2d');
let originalImage = new Image();// This block contains the magic.originalImage.onload = function () {
// Here we are going to prepare the censored image dimensions. let imageWidth = originalImage.width;
let imageHeight = originalImage.height; // And now we are going to set the canvas and context settings
// to process the original image from the first pixel (0, 0)
// to the last one (imageWidth, imageHeight). canvas.width = imageWidth;
canvas.height = imageHeight; canvasContext.drawImage(originalImage, 0, 0); let pixelationArray = canvasContext.getImageData(
0,
0,
imageWidth,
imageHeight
).data; let pixelationSize = 40; // Now it's time to manipulate the image, so it will look
// like a censored image using the pixelation technique. for (let y = 0; y < imageHeight; y += pixelationSize) {
for (let x = 0; x < imageWidth; x += pixelationSize) {
let pixel = (x + (y*imageWidth)) * 4;
canvasContext.fillStyle = "rgba(" +
pixelationArray[pixel] + "," +
pixelationArray[pixel + 1] + "," +
pixelationArray[pixel + 2] + "," +
pixelationArray[pixel + 3] + ")";
canvasContext.fillRect(
x,
y,
pixelationSize,
pixelationSize
);
}
} // Now just remains a bit of code to delete the previous image
// and add a new one with the pixelation technique in place. document.getElementById("image1").remove(); let img2 = new Image();
img2.src = canvas.toDataURL("image/jpeg");
img2.width = imageWidth; document.body.appendChild(img2);
};// Here we trigger the magic for the path we have to apply
// the pixelation technique. Just set the expected ID:originalImage.src = document.getElementById("image1").src;
How to apply pixelation using PHP?
PHP is probably the most popular language for web development, and yet many people say it’s a dead language, the fact is that it’s not, as many of the most important platforms online are based on PHP and it gets regular updates.
// Let's define the absolute path for the censored image$image = sprintf('/absolute/path/to/your%s', $publicImagePath);
// Check if the file existsif (!file_exists($image)) {
throw new InvalidArgumentException(sprintf(
'File "%s" not found',
$image
));
}
// Get the file extension and create a GD resource from it$imageExtension = pathinfo($image, PATHINFO_EXTENSION);
$imageExtension = strtolower($imageExtension);
if ('jpg' === $imageExtension || 'jpeg' === $imageExtension) {
$img = imagecreatefromjpeg($image);
} elseif ('png' === $imageExtension) {
$img = imagecreatefrompng($image);
} elseif ('gif' === $imageExtension) {
$img = imagecreatefromgif($image);
} else {
throw new InvalidArgumentException(
'Unsupported file extension'
);
}
// Now we have the image loaded up and ready
// Let's get the current image size[$width, $height] = getimagesize($image);
// And now, let's start from the top-left pixel and
// keep looping until we have the desired effectfor ($y = 0; $y < $height; $y += $pixelateY + 1) {
for ($x = 0; $x < $width; $x += $pixelateX + 1) {
// Get the color for current pixel $rgb = imagecolorsforindex(
$img,
imagecolorat($img, $x, $y)
);
// Get the closest color from palette $color = imagecolorclosest(
$img,
$rgb['red'],
$rgb['green'],
$rgb['blue']
); imagefilledrectangle(
$img,
$x, $y,
$x + $pixelateX, $y + $pixelateY,
$color
);
}
}
// Now it's time to output the image
// Yet you can consider using the "ob_start" function to catch the
// image content and store it in your server disk for future callsimagejpeg($img);
imagedestroy($img);
Resources
Images:
Text:
- Pixelation definition: https://en.wikipedia.org/wiki/Pixelization
