Question

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

Click here to see a live example（选择一种字体然后点击更新）

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以更新不同大小的背景图片。你可能仍会得到一个短暂的闪烁，但没有任何接近你现在所拥有的那么糟糕。您还将节省大量带宽。

更新时图像保持闪烁

1 个答案: