Посмотрим правде в глаза: хотя бы раз в жизни вы искали порно, или на вашем экране появлялись надоедливые всплывающие окна, в том числе порнографического содержания (это должно заставить вас задуматься о том, что вы искали, чтобы в итоге увидеть этот контент). Признай это! Отрицание — это первый шаг к поражению, и вы проиграете эту битву, если не признаете этого.

Что означает «пикселизация»?

Пикселизация (британский вариант пикселизации) или обработка мозаики — это любая техника, используемая при редактировании изображений или видео, при которой изображение становится размытым, отображая часть или все это в заметно более низком разрешении. Он в основном используется для цензуры.

Полосы цензуры – это основная форма цензуры текста, фотографий и видео, при которой "конфиденциальная" информация или изображения закрываются черными, серыми или белыми прямоугольными рамками. Эти полосы использовались для цензуры различных частей изображений.

Когда следует использовать технику пикселизации?

Вы должны использовать метод пикселизации в любом случае, когда у вас есть мультимедийный контент (например, изображения) с любой ссылкой, которая не должна отображаться публично. Одним из наиболее распространенных случаев является порнография, поскольку она обычно выдвигает на передний план гениталии, половой акт или другие типы ситуаций, которые могут не подходить для всех зрителей.

И как вы можете заставить его работать легко?

Надеюсь, вы не ожидали найти здесь пример для каждого языка программирования, потому что я не буду этого делать. Но я могу поделиться с вами парой примеров (с использованием JavaScript и PHP, двух основных языков, которые я сейчас использую при разработке веб-приложений) :

Как применить пикселизацию с помощью (веб) JavaScript?

Учитывая, что этот метод пикселизации будет применяться в браузере (посетители), а не на вашем сервере, отнеситесь к этому примеру с осторожностью, так как пользователь все равно может увидеть изображение без цензуры, если в его браузере отключен JavaScript (да , я отслеживал посетителей, у которых отключен JavaScript).

Суть использования JavaScript через веб-браузер заключается в том, что вы делегируете ответственность устройству пользователя, поэтому вы быстрее освобождаете ресурсы своего сервера, поскольку вам не нужно обрабатывать какой-либо контент. Приведенный ниже пример основан на ванильном JavaScript, поэтому не стесняйтесь адаптировать его к вашей JS Framework (например, jQuery, Angular, Vue или любой другой платформе javaScript):

// 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;

Как применить пикселизацию с помощью PHP?

PHP, вероятно, самый популярный язык для веб-разработки, и все же многие люди говорят, что это мертвый язык, на самом деле это не так, как и многие из наиболее важных онлайн-платформ основаны на PHP и регулярно обновляются.

// Let's define the absolute path for the censored image
$image = sprintf('/absolute/path/to/your%s', $publicImagePath);

// Check if the file exists
if (!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 effect
for ($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 calls
imagejpeg($img);
imagedestroy($img);

Ресурсы

Изображений:

Текст: