StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yes, your pixel values will change. </p> <p>Your monitor uses colors in rgba format which displays a color based on its red,green,blue and alpha (opacity) components.</p> <p>If you change the opacity of your image each pixel will have its alpha value changed accordingly.</p> <p>An exception is when you've applied 2 overlapping images (such as applying 2 background images).</p> <p>The exception causes all the rgba values of the resulting composite image to change.</p> <p>The exception will trigger an irreversible color mixing using a formula similar to this:</p> <pre><code>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; </code></pre> <p>Your second question is a Maybe.</p> <p>If you saved your alpha adjusted image to a format that supports rgba (like .png), you can draw the .png onto canvas and read the rgba pixel values using this canvas context method.</p> <p>If you saved your alpha adjusted image to a format that doesn't support alpha values (like .jpg), the opacity values are gone.</p> <p>Here's how to use canvas to read the opacity (alpha):</p> <pre><code>// 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] </code></pre> <p>If your image is an html img element, you can even supply a reference to that element as "yourImage" above. One warning you will get a cross-origin failure if the image source of your html img element is not hosted on the same domain as your web page (google CORS security).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload