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

Posted 2023-02-25

【中文标题】需要想法只显示一些像素并将剩余的像素变灰

【英文标题】：need ideas to only display some pixels and gray out the remaining pixels

【发布时间】：2011-05-10 23:57:29

【问题描述】：

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

基本上，在特定的时间间隔内，一个像素会显示出来并保持显示状态，而其他像素仍然是空白的。在每个间隔，随机显示另一个像素并保持显示以加入其他显示的像素。最终，所有的像素都会显示出来。

关于如何实现这一点的任何建议？

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

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

【问题讨论】：

我怀疑您可以使用类似于 CSS sprites 的技术纯粹在 javascript 中执行此操作。

您可以使用 javascript - 但这样当 java-script 关闭时，图像立即可见。您可以在服务器端使用 gd 库，但这会产生 CPU 和带宽开销。

【参考方案1】：

编辑：我意识到我误解了你需要做的事情，但我认为这很酷，可以应用于你的问题......

See working demo of the following →

我把它放在 jQuery 中。我把每个像素都做成了一个 3x3 的盒子，否则处理时间会太长。虽然我还没有测试过 IE，但在客户端似乎可以很好地解决这个问题。

<div id="w">
    <img id="i" src="yourImage.jpg"   />
</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 →

【讨论】：

非常令人印象深刻......喜欢它......需要稍微调整一下，但它绝对是一段​​甜蜜的代码......出色的工作 mVChr！

确实非常好！也刚刚在这里重用：***.com/questions/11039125/…

【参考方案2】：

将图像文件加载到图像资源中（imagecreatefrompng、imagecreatefromgif 等）。

决定显示哪些像素，使用 rand() 或您想选择的任何方式。

遍历图像中的每个像素，如果不是您选择显示的像素，则使用imagesetpixel 将其涂成灰色。