Search code examples
image-processingimagemagickimagemagick-convert

How to (if possible) "undo" css overlay on PNG using ImageMagick?

I have screenhots of images that were made when the image had a CSS overlay rgba(0,0,0,.4) on it.

Here is the original image:

Original image

and an example of the html that would produce the overlay:

<html>
<body>
<div style="background: rgba(0,0,0,.4); position: absolute; width: 100%; height: 100%; left: 0; top: 0;">   
</div>
<img src='original.png'>
</body>
</html>

that then produces the following screenshot PNG image:

PNG image with overlay

Is there a way to "undo" this image overlay and recover the original image, or something very close, using ImageMagick?

Based on a hunch, I tried convert -evaluate Multiply 2.5 but this resulted in a washed-out image, so I'm assuming there's something more complicated going on.

[Edited to note: I'm not interested in this particular image, per se, but in a general solution for images like this one, which was generated from the library jdenticon; I have a whole folder of them...]

Solution

  • Here is one way to recover the image. You know that the background of the original is 255 (white) and the background of your result is 153 (by measurement). So you were on the right track, but just used the wrong multiplier, which should be 255/153=1.6666

    So

    convert image.png -evaluate multiply 1.6666 x.png

    enter image description here