html - 不透明度属性是否改变像素值

Question

假设我有一个 CSS 属性 Opacity = 1.0 的 HTML 文档。然后我将其不透明度更改为“.5”。我在那里拍了两张屏幕截图（在不透明度改变之前和之后）。图像的像素值是否已更改？如果有，我如何检测使用两个图像的像素值（一个在更改前，一个在更改后）更改了多少不透明度？如何在此处使用 HTML5 画布元素？

谢谢

Answer 1

是的，您的像素值会改变。

您的显示器使用 rgba 格式的颜色，该格式根据其红色、绿色、蓝色和 alpha（不透明度）分量显示颜色。

如果您更改图像的不透明度，每个像素的 alpha 值都会相应更改。

应用了 2 个重叠图像（例如应用 2 个背景图像）时例外。

该异常会导致生成的合成图像的所有 rgba 值发生变化。

该异常将使用类似于此的公式触发不可逆的颜色混合：

alpha = 1 - (1 - topImage.A) * (1 - backImage.A);
red = topImage.R * topImage.A / r.A + backImage.R * backImage.A * (1 - topImage.A) / r.A;
green = topImage.G * topImage.A / r.A + backImage.G * backImage.A * (1 - topImage.A) / r.A;
blue = topImage.B * topImage.A / r.A + backImage.B * backImage.A * (1 - topImage.A) / r.A;

你的第二个问题是一个可能。

如果您将 alpha 调整后的图像保存为支持 rgba 的格式（如 .png），则可以将 .png 绘制到画布上并使用此画布上下文方法读取 rgba 像素值。

如果您将 alpha 调整后的图像保存为不支持 alpha 值的格式（如 .jpg），则不透明度值将消失。

以下是如何使用画布读取不透明度（alpha）：

// get references to canvas and its context
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

// draw the image onto canvas
context.drawImage(yourImage,0,0);

// get an array containing the rgba values for each pixel
// this array has 4 elements for each pixel: r,g,b,a
// the values range from 0-255
var imageData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imageData.data;

// assuming the opacity was change over the whole image
// you can get the alpha (opacity) be reading the 4th array value
var red = data[0];
var green = data[1];
var blue = data[2];
var alpha = data[3];  // values [0-255]

如果您的图像是 html img 元素，您甚至可以提供对该元素的引用，如上面的“yourImage”。如果您的 html img 元素的图像源未托管在与您的网页相同的域上（谷歌 CORS 安全性），您将收到一个警告，您将收到跨域失败。