😢 Front row reminder, due to my own technical limitations, this article is unfinished.
When it comes to website watermarks, perhaps your first reaction is that kind of blind watermark that violates privacy makes it easier for developers to track.
Simply put, you can add some information to a website or app by using imperceptible color changes and overlaying content on the image spectrum using Fourier transforms. This information will be propagated when you send the image and is generally interference-resistant, meaning it can resist compression, cropping, or other image processing methods.
The information left on top is generally related to you, and some say it is for developers to trace bugs, as for what to trace, DDDD.
But the watermark to be implemented this time is different from the blind watermark.
Image Watermark#
The images you directly save from most social media platforms will have a watermark in the lower right corner, which protects the copyright to some extent, as well as platform flow-back. There are even multiple watermarks.
If you are running a website, of course, you would want every image on your website to not have "psoriasis", which is why this watermark is generally only added when you actively perform a save operation. However, for the sake of aesthetics, some people who want to learn from your website directly right-click and save the image, and then upload it to their own website. What should you do?
There is no way to intercept the save technically, and it is not good to put "psoriasis" on every image. So how about trying to imitate the blind watermark to deal with the images on the website?
Color Cancellation#
Our goal is clear: there is a watermark on the image, and it can be seen directly when downloaded, but it cannot be seen when displayed on the website.
So we just need to implement an overlay layer that can cancel out the color of the watermark when it is superimposed on the image with the watermark. Then you might think of a concept: complementary colors.
This is a color wheel. Mixing equal amounts of colors on opposite sides will produce brown or gray. However, we are not using pigments on web pages, but RGB. So the definition of complementary colors in RGB is simple: the sum of each color channel of two colors is 255, which is the complementary color. In other words:
- The complementary color of red (255, 0, 0) is cyan (0, 255, 255)
- The complementary color of green (0, 255, 0) is magenta (255, 0, 255)
- The complementary color of blue (0, 0, 255) is yellow (255, 255, 0)
RGB Complementary Colors#
According to this rule, I only need to overlay two text layers of colors:
Unfortunately, the colors on the computer are not the same as pigments, so we need to set the transparency of the upper layer green to 50% to mix with magenta, resulting in a neutral gray:
But if you think about it, you will find that there is still a magenta with 100% transparency, so the content under the magenta cannot be imagined out of thin air, right? So we need to adjust the transparency of magenta relatively. Adjust it to magenta 50%, green 32%, and you will get a good effect.
But gray is not the result we want, right? This watermark is still very obvious:
So we need to rely on something new, image blending mode. Set the green to overlay mode and adjust the transparency of the two colors, and you will get a good effect:
Is this considered successful? Don't worry, our images are not always black, let's add some color to this image:
Uh...this gives a very explosive effect 😢
Overlay Mode for Color Images#
It's not easy to play with color modes in color images. After trying, the best result I got was this:
I found that as long as you don't look closely, this color difference is not easy to notice. So let's try something else, make this watermark larger and finer, so that the color difference range is not continuous. But unfortunately, the effect is still not good:
This method has strict requirements on the background color, and the background color will also affect the blending of complementary colors, making the watermark on the gray background particularly obvious.
This solution is only suitable for monochrome images, and it may not work for color images. So let's think about other methods.
Manipulating Image Processing Modes#
Although theoretically, there is no good way to achieve color cancellation, it's still possible to increase the complexity of stealing images by borrowers, right? Take a look at the image adjustment menu, the one that can restore the image information after processing seems to be only invert and replace color.
Invert#
I feel that this is the easiest to implement, but it is also the easiest to restore. It is very simple to implement on the website side with just one line of CSS:
filter: invert(100%);
But anyone who has a little experience with image processing will know how to deal with this kind of image 😂
Remember the anti-spider we discussed before? Some websites replace text with dynamically generated fonts to achieve rendering that is different from what the program outputs. So how about implementing color replacement using a color table?
Replace Color#
To replace the color of an image in a web page, you need to use canvas. But unexpectedly, the getImageData method of canvas 2D can actually obtain sensitive data across domains:
That's really bad. Although our purpose is harmless, if we want to make this method universal, the experience with cross-domain issues will be very poor.
Is there no other way? At this point, I thought of the powerful filter in CSS.
The filter Property#
In addition to using the invert function for inversion, there is also a hue-rotate function in CSS that adjusts the hue without losing the original color information.
But after a simple experiment, you will find that there are two different results when adjusting the hue in Photoshop and CSS!?
No matter how I adjust it in the browser, I can't get the same result... Is it a problem with Safari? It's not, Chrome gets the same color rendering as Safari. That's strange.
What's the difference between adjusting the hue on both sides?#
First, hue-rotate is rotating the hue, why is it rotating?
Let's go back to this color wheel. You can see this circle, which has 360 degrees. The so-called rotation means that the color rotates from a certain point to the target color by a certain number of degrees. For example, the red-orange located at 0 degrees becomes yellow after rotating 90 degrees, and it becomes red-orange again after rotating 360 degrees.
So let me try directly adjusting the color wheel on both sides to see if I can see the difference?
After this test, we obtained three key pieces of information:
- Adjusting the hue on both sides is rotating the color wheel, and you can see that the color mapping on both sides is correct.
- One side has differences in the processing of some colors, and it seems to lose more color information in Photoshop (the three green blocks are almost one block)
- CSS processing also loses color information
😅 This is embarrassing. If it is rotating, theoretically, it should not lose color information, but if this is the case, hue-rotate cannot be used.
Ending on a Gray Note#
I have made many attempts in terms of color, and currently, there is no good solution except for the simplest inversion. But I think color replacement is an interesting idea, maybe I can make a demo when I have time. But aside from the cross-domain issue, I think performance will also be a big problem (after all, it is pixel-by-pixel operation), plus the JS part will definitely need obfuscation.
So the best solution is actually to increase the watermark 🤔️ In addition, other small methods (such as disabling right-click, preventing hotlinking, etc.) are really not effective against those who are determined.
Finally, here is a picture of rotating hue processed with Python
I really don't understand... why is it like this...