need ideas to only display some pixels and gray out the remaining pixels

问题

I'm looking for ideas ...brainstorming a new project for a client ....I have an image ...300px x 300px ...I need to display the image one random pixel at a time until the entire image is revealed.

Basically, at certain intervals, a pixel is revealed and remains revealed while other pixels are still blank. At each interval, another pixel at random is revealed and remains revealed to join the other revealed pixels. Eventually, all the pixels will be revealed.

Any suggestions on how to make that happen?

I could make numerous copies of the image and manually reveal one random pixel, but surely it can be done programatically :)

Oh, and it cannot be any form of flash.

回答1:

EDIT: I realize I mis-interpreted what you needed to do, but I thought this was cool anyway and could be applied to your problem...

See working demo of the following →

I threw this together in jQuery. I made each pixel actually a 3x3 box instead because otherwise it would take way too long to process. Seems to work pretty well for something on this in client side, though I haven't tested IE yet.

<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 →

回答2:

1. Load the image file into an image resource (imagecreatefrompng, imagecreatefromgif, etc).

2. Decide what pixels to show, using rand() or however you want to choose them.

3. Loop over every pixel in the image, and if it's not one you chose to show, color it gray with imagesetpixel.

来源：https://stackoverflow.com/questions/5957789/need-ideas-to-only-display-some-pixels-and-gray-out-the-remaining-pixels