Question

我想让图像变暗，但最终它并不是全黑的，因为我可以在某种程度上看到图像。我想只使用vanilla JS（没有jQuery）。

＆＃13;

var element = document.getElementById("img");
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",];

var counter = 0;
var j=0;
var i = setInterval(function(){
    if(j < colorArr.length){
      element.style.backgroundColor = colorArr[j];
      j++;
    }  
  
    counter++;
    if(counter === 8) {
        clearInterval(i);
    }
}, 250);

＆＃13;

div.darken img {
  background-color: white;
}

＆＃13;

<html>
 <body>
 
  <div class="darken">    
     <img id="img" 
            src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
  </div>

  </body>
</html>

＆＃13;

Answer 1

绘制另一个具有高透明度的矩形以覆盖图像并逐渐增加其不透明度

Answer 2

尝试在<img>标记位置上方添加第二个元素，其宽度和高度绝对与图像相同，并将其作为代码中element变量的目标。

＆＃13;

var element = document.getElementById("overlay");
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",];

var counter = 0;
var j=0;
var i = setInterval(function(){
    if(j < colorArr.length){
      element.style.backgroundColor = colorArr[j];
      j++;
    }  
  
    counter++;
    if(counter === 8) {
        clearInterval(i);
    }
}, 250);

＆＃13;

#overlay {
  position: absolute;
  width: 400px;
  height: 400px;
}

＆＃13;

<div id="overlay"></div>
   <img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />

＆＃13;

Answer 3

尽管您 4 年前问过，但在测试了您的示例代码之后，我最终还是看不到图像，这里是对原始代码的一个小修复，以确保在循环结束时无法看到图像：< /p>

function darkenImage() {
  var element = document.getElementById("img");
  if (element.stop) return;
  var colorArr = ["#eee","#ccc","#aaa","#888","#666","#444","#222"];
  element.counter=0;
  var i = setInterval(function() {
    if (element.counter<colorArr.length) {
      element.style.backgroundColor = colorArr[element.counter];
      element.counter++;
    } else {
      clearInterval(i);
      element.width=element.offsetWidth;
      element.height=element.offsetHeight;
       element.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==";
      element.stop=true;
    }
  }, 250);
}

div.darken img {
    background-color: white;
}

<div class="darken">    
    <img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" onload="darkenImage();"/>
</div>

我改变了颜色数组，所以最后不会觉得bgcolor跳跃太大。我还删除了初始值 #fff 和最后一个值 #000，因为它们不是必需的。另一个变化是存在不必要的变量，我将计数器作为图像元素的属性。

最后，我没有将背景颜色设置为 #000，而是用单个黑点 base64 图像替换了图像。

如果你最后能看到你的图像，我只能假设它是你的屏幕或你的眼睛里的东西，保留了原始图像的缓存/内存，因为它被完全替换了。

一些最终观察：

示例中不需要白色背景的 css 和图像周围的 div，但我保留了它们，因为您可能还有其他用途。
要使其正常工作，图像必须只有两种颜色，黑色用于可见像素，透明色用于背景。必须使用 opacity 对不透明图像进行其他更改。

如何使图像变暗

3 个答案: