Изображение продолжает мерцать при обновлении - PullRequest
Новая
       27

Изображение продолжает мерцать при обновлении

0 голосов
/ 16 ноября 2011

Попробуйте изменить размер изображения или изменить цвет. изображение мерцает:

Нажмите здесь, чтобы увидеть живой пример (выберите шрифт и нажмите обновить)

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>

Как видите, после обновления размера и цвета он будет мигать. Как я могу это остановить?

1 Ответ

2 голосов
/ 16 ноября 2011

Вы постоянно обновляете свойство background, поэтому оно должно извлекать изображение снова для каждого пикселя изменения размера.Очевидно, что он не может сделать это мгновенно, поэтому вы получите мерцание.

Вместо этого попробуйте изменить background-size и установите setTimeout, чтобы обновить фоновое изображение с другим размером.Вы все еще можете получить кратковременное мерцание, но ничто не так плохо, как сейчас.Вы также сэкономите огромное количество трафика.

...