Я ищу идеи … мозговой штурм нового проекта для клиента …. У меня есть изображение … 300px x 300px … Мне нужно отображать изображение по одному случайному пикселю за раз, пока все изображение не будет выявлено.
В принципе, через определенные промежутки времени пиксель обнаруживается и остается открытым, в то время как другие пиксели остаются пустыми. На каждом интервале обнаруживается другой пиксель в случайном порядке и остается открытым для присоединения к другим обнаруженным пикселям. В конце концов все пиксели будут обнаружены.
Любые предложения о том, как это сделать?
Я мог бы сделать многочисленные копии изображения и вручную выявить один случайный пиксель, но, безусловно, это можно сделать программно 🙂
О, и это не может быть какой-либо формой вспышки.
EDIT: Я понимаю, что я неправильно интерпретировал то, что вам нужно было сделать, но я подумал, что это здорово, и может быть применено к вашей проблеме …
См. Рабочую демонстрацию следующего →
Я бросил это вместе в 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(); См. Рабочий пример →
Загрузите файл изображения в ресурс изображения ( imagecreatefrompng , imagecreatefromgif и т. Д.).
Определите, какие пиксели будут отображаться, используя rand () или, тем не менее, вы хотите их выбрать.
Настройте петлю на каждый пиксель изображения, и если это не тот, который вы выбрали, покрасьте его в серый цвет с помощью imagesetpixel .