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

我有一个网站，用户可以找到解决方案（任何任务）。所以我想把解决方案放在网站上，但模糊了解决方案文本的某些部分。我用css模糊实现了它，但在开发者模式下（inspect元素，ctrl+shift+I），所有模糊的文本都是可见的。问题：如何在网站的源代码中隐藏模糊文本

---

p、 所有解决方案都将插入文本（而不是图像）

您可以使用库函数在服务器端生成图像，然后使用

生成图像后，可以将HTML代码中的文本替换为“

”，$source）；
}
echo“解决方案：”+$source+”
；

---

如果你需要模糊较长的文本（不仅仅是几个重要的关键字），那么你将不得不进行更多的计算（换行符等）

这很简单：你不能。如果是文本，它在代码中，所以它在浏览器中，所以它是可见的。有没有任何方法可以自动将文本转换为模糊图像？在服务器端是的，有大量的库可以从文本创建图像

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