使用 html5/CSS/JS 的图像亮度答案

【问题标题】：Image brightness with html5/CSS/JS使用 html5/CSS/JS 的图像亮度
【发布时间】：2017-05-15 18:42:07
【问题描述】：

在我的项目中，我试图创造一种环境照明的感觉。我通过客户端编码处理图像，我需要调整几个图像的亮度。我知道有诸如 Pixastic 之类的库，但我想要一个直接应用于 HTML 代码（如标签）而不是 JS 中的 Image 对象的解决方案。是否有任何基于 Javascript 或 CSS 的方法来做到这一点？

【问题讨论】：

您可能会使用（不支持 IE）<canvas> 标签并将图像加载到那里。

标签： javascript html css

【解决方案1】：

您可以尝试使用 CSS opacity 看看是否适合您的需求。

img {
    opacity: 0.8; /* good browsers */
    filter: alpha(opacity=80); /* ye 'old IE */
}

【讨论】：

虽然我怀疑它会不会好看，但可以在图像后面放一个白色背景，这样当它变得透明时，它就会变得越来越白（“更亮”）
我首先想到的是使用不透明度。我试图在图像顶部放置一个阴影层，但它会使整个块变暗。我只想使图像变暗。
然后在图片后面加一层黑色。

【解决方案2】：

正如 Blender 所建议的，<canvas> 标签是您想要进行伽玛操作的标签，这是一种非线性的逐像素变换。

【讨论】：

【解决方案3】：

首先，如果 Pixastic 可以处理new Image 的结果，它也可以处理文档中的<img> 元素。

除此之外，您的选择基本上是画布图像数据操作（在 IE8 或更早版本中不起作用）和 SVG 过滤器（在 IE8 或更早版本中不起作用，并且不能直接在 HTML 元素上使用，但壁虎）。

【讨论】：

【解决方案4】：

这是一个 HTML5 的。

检查亮度调节。

https://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Filters.brightness = function(pixels, adjustment) {
  var d = pixels.data;
  for (var i=0; i<d.length; i+=4) {
    d[i] += adjustment;
    d[i+1] += adjustment;
    d[i+2] += adjustment;
  }
  return pixels;
};

【讨论】：

旧帖，请用本站做测试html5html5canvastutorials.com
死链接-1 :|