如何从输入文本（在网站中）模糊图像

Question

I have website that users can find solutions (for any task). So I want to put solution in website but blur some part of solution text. I made it with css blur, but in developer mode (inspect element, ctrl+shift+i) all blurred text is visible. Question: How can I hide blurred text in source code of the website?

p.s. all of solutions will be inserted in text (not image)

Answer 1

You can generate the image at server side with GD library imagettftext() function, then apply the blur effect with imagefilter()

Once you generated the image, you can replace the texts in your HTML code with <img> tags referring to the generated image.

Example (probably not working, just an on-the-fly-coded theory):

$fontType  = 'Arial';
$fontSize  = 16; // px
$source    = 'The solutions is to use GD library with imagettftext and imagefilter!';
$blurTexts = ['GD', 'imagettftext', 'imagefilter'];

// generate the images
foreach( $blurTexts as $text ){
    // using strrev() just to confuse the hash-table users :P
    $imageFile = strrev(sha1($text)) . '.jpg'; 
    // dont generate same image twice
    if (file_exists($imageFile)) {
        continue;
    }
    $bounds = imagettfbbox($fontSize, 0, $fontType, $text);
    $width = $bounds[2]; // lower right corner, X position
    $height = $bounds[3]; // lower right corner, Y position
    $image = imagecreatetruecolor($width, $height);
    $color = imagecolorallocate($image, 0, 0, 0); // black
    imagettftext($image, $fontSize, 0, 0, 0, $color, $fontType, $text);
    imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);

    // save the image
    imagejpeg($image, './' . $imageFile);

    // replace the text parts with the image
    $source = str_replace($text, "<img src='{$imageFile}'>", $source);
}

echo '<h1>Solutions:</h1><p>' + $source + '</p>';

If you need to blur out longer texts (not just a few important keyword) then you will have to make more calculations (line breaks, etc)