Here is a simple watermarking tool I built as a personal project for the purpose of secretly watermarking on-screen content.
The use-case I was attempting to solve was for logged-in users who attempted to do a screen shot of what they seeing on screen (possibly over a Webex or usertesting.com session).
For this to work, the user must first be authenticated to the site where the image in question is being displayed. The host application would simply pass in the userId to the watermarking function, which simply works by encoding the userId into a simple black/white SVG pattern at an extremely low opacity to be easily detectible by the human eye. After several tests, a 0.02% opacity proved the most effective.
The script works instantly since it's happening on the frontend, and therefore doesn't alter the underlying image or text in any way.
In the above example, you can see that a userId of "1234" with no opacity. In this example, it's obviously very easy to see the SVG pattern.
However, if you change the opacity to 0.02%, the pattern is no longer noticeable - especially to the unsuspecting image "thief". Then... if the "thief" decides to post this image somewhere online or whatever, all you need to do is open it in Photoshop, and use the Color Range selector (setting the fuzziness down to zero), and voila! The pattern will show through!
Then, all you need to do is look up the userId from the pattern, and trace it back to the user's name!
