更新时图片一直闪烁

Question

尝试调整图像大小或更改颜色。图像闪烁：

单击此处查看实例（选择字体然后单击更新)

PHP:

    <?php
// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 64);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 64, $white);

// The text to draw
$text = $_GET['t']; // text
// Replace path by your own font path
$font = 'fonts/' . $_GET['f'] . '.ttf'; // font

$color = $_GET['c'];
$red = hexdec(substr($color, 0, 2));
$green = hexdec(substr($color, 2, 2));
$blue = hexdec(substr($color, 4, 2));

$font_color = imagecolorallocate($im, $red, $green, $blue);

$size = $_GET['s'];

// Add the text
imagettftext($im, $size, 0, 5, 30, $font_color, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>

JS:

$(function()
        {
            $.farbtastic('#colorpicker', function(color)
            {
                $('#color').val(color);
                updateImage();
            });

            $('#color').blur(function()
            {
                $.farbtastic('#colorpicker').setColor($(this).val());
                updateImage();
            });

            $('#update-btn').click(function()
            {
                updateImage();
            });

        });

        function updateImage()
        {
            $('.sample-text').attr('style', 'background:url(preview.php?s='+$('#font-size').val()+'&c='+$('#color').val().substr(1)+'&f='+$('#font').val()+'&t=' + $('#sample-text').val().replace(' ', '+') + ')');
        }

        function update(value)
        {
            $('#range-display').text(value);
            updateImage();
        }

HTML:

<div>
            <select id="font">
                <option>Choose a Font</option>
                <option value="dandy">Dandy</option>
                <option value="wtf">Pixel Font</option>
            </select>
            <input id="font-size" type="range" min="14" max="70" value="25" onchange="update(this.value)" /><span id="range-display">25</span>
            <input type="text" id="sample-text" placeholder="Sample text" />
            <input type="button" value="Update" id="update-btn" />
            <div id="colorpicker"></div>
            <input type="text" id="color" name="color" value="#123456" />
            <div class="sample-text"></div>
        </div>

正如你所看到的，一旦更新了尺寸和颜色，它就会闪烁。我怎样才能阻止呢？

Answer 1

您不断更新 background 属性，因此它必须为调整大小的每个像素再次获取图像。显然，它不能立即做到这一点，所以你会出现闪烁。

相反，请尝试更改 background-size，并设置 setTimeout 以使用不同的大小更新背景图像。您可能仍然会遇到短暂的闪烁，但不会像现在那么糟糕。您还将节省大量带宽。