Image keeps flickering when updating

Question

Try to resize the image, or change the color. the image flickers:

Click here to see a live example (Choose a font then click update)

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>

As you can see, once updating the size and color, it'll flicker. How can I stop that?

hm, try to change the size after updating, or change the color after updating. — user1042002, Nov 16 '11 at 02:05
its because its not drawn on the client - it has to make a request, process the image then send it back. — Daniel A. White, Nov 16 '11 at 02:54

score 2 · Answer 1 · answered Nov 16 '11 at 02:54

2

You are constantly updating the background property, so it has to fetch the image again for every single pixel of resizing. Obviously, it can't do that instantly, so you get flicker.

Instead, try changing the background-size, and set a setTimeout to update the background image with a different size. You might still get a brief flicker, but nothing near as bad as what you have now. You will also save immense amounts of bandwidth.

answered Nov 16 '11 at 02:54

Niet the Dark Absol

320,036
81
464
592

The only other method I could think to add would be to create the image via javascript (loading it in to cache) and then swapping it out. Might eliminate the flash as well. Some details about detecting image load are on the jQuery forum: http://forum.jquery.com/topic/simple-image-load-detection-with-load – keif Jan 21 '12 at 05:49

Image keeps flickering when updating

1 Answers1