Overlay an image (with diff probably?)

[CyberAP]

It's so common to verify that your code matches what's in the mockup, overlaying an image gets that job done very fast. In theory it's even possible to make a screenshot of the page with HTML2Canvas and compare it with the provided image, but I guess that would blow up the size of the bundle without async import.

[argyleink]

i like this feature request because i've done the gesture, but i'd need us to think out a few things:

1. unsure how responsive should work here. the image should be set to contained, and at full width, would the design verifier need to put their browser window at the exact width the comp was made? dom is responsive, image is static.
2. idea push back: designer uses devtools to take a screenshot of the website, and goes and overlays it into their design tool. could even screenshot per component that way, instead of trying to match the whole thing. see #50 also, i want a camera icon in the toolbar that enables 1 click full page or element screenshotting

thoughts on that?

[CyberAP]

The way it would feel most natural to me is that there is a special overlay layer where you could put images, that matches document width and height, with dynamic x axis where images are relative to the center. For example if we place an image right in the center it would have left: 50%; transform: translateX(-50%);. So we only change the left property here. Also it should be possible to link image to element position and update it on resize or on element position change with Mutation Observer.

There is some sense in making screenshot in browser then pasting it into graphics editor, but that would decrease productivity if you want to make your changes on the fly to match your CSS with your image. This is especially useful if you're writing CSS that is based upon designers sketch, you could avoid misalignments at all.