更新时图片一直闪烁

Posted 2023-02-25

【中文标题】更新时图片一直闪烁

【英文标题】：Image keeps flickering when updating

【发布时间】：2011-11-16 01:58:59

【问题描述】：

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

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>

如您所见，一旦更新尺寸和颜色，它就会闪烁。我怎么能阻止它？

【问题讨论】：

我在 FF\chrome\IE 上没有闪烁

hm，更新后试试改大小，或者更新后改颜色。

因为它没有在客户端绘制 - 它必须发出请求，处理图像然后将其发送回。

【参考方案1】：

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

改为尝试更改background-size，并设置setTimeout 以使用不同大小更新背景图像。你可能仍然会得到短暂的闪烁，但没有什么比现在更糟糕的了。您还将节省大量带宽。

【讨论】：

我能想到的唯一其他方法是通过 javascript 创建图像（将其加载到缓存中），然后将其换出。也可以消除闪光灯。关于检测图像负载的一些细节在 jQuery 论坛上：forum.jquery.com/topic/simple-image-load-detection-with-load