Downlading a transformed image using the browser but I'm getting the original one instead of the transformed one

Issue

Probably a silly question, but not sure if it's possible to achieve it. I have an image in a page that uses the CSS style transform: scale(-1,1) then mirroring the original image. What I need is to download the mirrored image, I mean, the one that is in the transformed state. But when I download the image I'm getting the original one, so, this one is not scaled. Is there any way by only having the page, to download the image in the CSS state that I'm seeing it?

I know there are other tools, that I can use to mirror the original image. Still, my question here is if from only the browser as is, without any extensions or third-party libraries, may I download the image transformed?

Solution

If you are using chrome you could look into Capture node screenshot. This is a built in feature without any extensions and applies CSS properties. Open the inspection tool and right click on the element to do so. (Another short cut to find the element in the inspection tool is to right click on the image and click inspect.)

Note that if the transforms are applied to a div wrapper of the image, you could capture the node screenshot for that div.

Answered By - SyndRain