нужны идеи, чтобы отображать только некоторые пиксели и затемнять оставшиеся пиксели серым цветом - PullRequest
1 голос
/ 11 мая 2011

Я ищу идеи ... мозговой штурм нового проекта для клиента .... У меня есть изображение ... 300px x 300px ... Мне нужно отображать изображение по одному случайному пикселю за раз дораскрывается все изображение.

По существу, через определенные промежутки времени обнаруживается пиксель, который остается открытым, в то время как другие пиксели остаются пустыми.В каждом интервале другой случайный пиксель обнаруживается и остается открытым для соединения с другими обнаруженными пикселями.В конечном итоге все пиксели будут обнаружены.

Любые предложения о том, как это сделать?

Я мог бы сделать множество копий изображения и вручную обнаружить один случайный пиксель, но, конечно, это может бытьсделано программно:)

О, и это не может быть любой формой вспышки.

Ответы [ 2 ]

3 голосов
/ 11 мая 2011

РЕДАКТИРОВАТЬ: Я понимаю, что неправильно истолковал то, что вам нужно было сделать, но я все равно подумал, что это круто и может быть применено к вашей проблеме ...

См. Рабочую демонстрацию следующего & # x2192;

Я бросил это вместе в jQuery. Вместо этого я сделал каждый пиксель блоком 3х3, потому что в противном случае обработка займет слишком много времени. Кажется, что-то очень хорошо работает на стороне клиента, хотя я еще не тестировал 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();

См. Рабочий пример & # x2192;

0 голосов
/ 11 мая 2011
  1. Загрузка файла изображения в ресурс изображения ( imagecreatefrompng , imagecreatefromgif и т. Д.).

  2. Решите, какие пиксели показывать, используя rand () или как хотите, чтобы выбрать их.

  3. Обведите все пиксели на изображении, и если вы не хотите показывать его, закрасьте его серым с помощью imagesetpixel .

...