Question

我有网站，用户可以找到解决方案（任何任务）。所以我想在网站上提出解决方案但是模糊解决方案文本的某些部分。我使用css模糊，但在开发人员模式（检查元素，ctrl + shift + i）中，所有模糊文本都可见。问题：如何在网站的源代码中隐藏模糊文本？

P.S。所有解决方案都将插入文本（而不是图像）

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

如果您需要模糊更长的文本（不只是一些重要的关键字），那么您将不得不进行更多的计算（换行等）

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

1 个答案: