Question

我正在寻找想法......为客户集思广益一个新项目....我有一个图像...... 300px x 300px ......我需要一次一个像素地显示图像，直到整个图像显露出来。

基本上，在一定的时间间隔内，一个像素被显示并保持显示，而其他像素仍为空白。在每个间隔处，随机显示另一个像素并保持显示以连接其他显示的像素。最终，将显示所有像素。

有关如何实现这一目标的任何建议？

我可以制作大量的图像副本并手动显示一个随机像素，但肯定可以以编程方式完成：）

哦，它不能是任何形式的闪光灯。

Answer 1

编辑：我意识到我错误地解释了你需要做什么，但我认为这很酷，可以应用到你的问题......

See working demo of the following →

我把它放在jQuery中。我让每个像素实际上都是一个3x3的盒子，因为否则它会花费太长时间来处理。在客户端，似乎可以很好地解决这个问题，尽管我还没有测试过IE。

<div id="w">
    <img id="i" src="yourImage.jpg" width="300" height="300" />
</div>

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();

See working example →

Answer 2

将图片文件加载到图片资源（imagecreatefrompng，imagecreatefromgif等）。
使用rand（）确定要显示的像素，或者您想要选择它们。
循环覆盖图像中的每个像素，如果不是您选择显示的像素，请使用imagesetpixel将其涂成灰色。

需要想法只显示一些像素并使剩余像素变灰

2 个答案: