如何從輸入文本制作模糊圖像（在網站中）

Question

我有用戶可以找到解決方案的網站（對於任何任務）。 所以我想把解決方案放在網站上，但模糊了解決方案文本的某些部分。 我用 css 模糊做了它，但在開發者模式下（檢查元素，ctrl+shift+i）所有模糊的文本都是可見的。 問題：如何隱藏網站源代碼中的模糊文本？

ps所有解決方案都將插入文本（不是圖像）

Answer 1

您可以使用GD庫imagettftext()函數在服務器端生成圖像，然后使用imagefilter()應用模糊效果

生成圖像后，您可以使用引用生成圖像的<img>標記替換 HTML 代碼中的文本。

示例（可能不起作用，只是一個即時編碼的理論）：

$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>';

如果您需要模糊較長的文本（不僅僅是一些重要的關鍵字），那么您將不得不進行更多的計算（換行等）