Question

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

由于

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），则不透明度值将消失。

以下是如何使用canvas来读取不透明度（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元素的图像源未与您的网页（Google CORS安全性）托管在同一域中，则会发出一条警告您将发生跨域故障。

“不透明度”属性是否更改像素值

1 个答案: