

Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser - scaturr
http://brianium.github.io/watermarkjs/

======
valuegram
I thought the point of watermarking is to prevent people from using your
images without your branding, but if it's done on the client side, it's easy
to circumvent:

[http://brianium.github.io/watermarkjs/img/shepherd.jpg](http://brianium.github.io/watermarkjs/img/shepherd.jpg)

~~~
scaturr
You are correct. This would serve the purpose for many users who don't know
how to go digging around for urls in JS, but more importantly its a tool for
generating them on the client so a server doesn't have to - say for a CMS?

~~~
nathankleyn
That's all fine until Googlebot-Image comes along, collects up all your
unwatermarked images, and displays them in search results for the world to
use.

I can see this being useful for running as a batch process in Node/IO.js and
uploading to, say, S3.

~~~
scaturr
Well what if you batch it in the browser? It is quite possible to use file
inputs to generate watermarked images without ever storing the image you are
watermarking, and then upload the result.

~~~
nathankleyn
Yep - that's totally possible. Actually, now you phrase it like that, I see
what you mean about using it that way for a CMS, and it's an awesome idea.

~~~
artursapek
You could also use the canvas element to display the image & watermark as a
flat layer.

~~~
kuschku
Still, the image would somehow have to be loaded in the browsers, at which
point it’s easy to circumvent.

------
hobarrera
Not only can this be circumvented with extreme ease[1], but it also:

(a) Make the website quite heavier. Especially for mobile devices, old
computers, etc. (b) Stops breaking with noscript. (c) Search engines won't
find your watermarked photos. In order to get credit for your stuff, people
need to find it to re-use it first.

[1]:
[https://news.ycombinator.com/item?id=9545044](https://news.ycombinator.com/item?id=9545044)

~~~
scaturr
I am seeing the same arguments made :) - Watermarking an on-page element does
allow the original image to be access quite easily.

However, I will reiterate it is pretty useful to watermark from a user upload.
You can watermark an image from the user's local machine - upload it, then
display it. All from the client. I don't believe there is any easy in
circumventing this method - if there is I would love to see it :)

------
jarnix
Watermarking in the browser seems counter productive though.

~~~
scaturr
How so? Being able to generate watermarks in the browser is one less thing a
server has to do right? Especially if that server is in a shared environment
without image libraries or lacks tools for uploading things concurrently.

~~~
0xff00
It defeats the point of watermarking since someone with the technical skills
can just recover the non-watermarked image.

~~~
scaturr
Watermarking by urls or existing images would leave the non-watermarked image
open - you are correct. This case is still fine for most users, but
watermark.js also allows the use of file inputs. You can grab an image from a
file input, then watermark, then upload it. This would leave the non-
watermarked image closed off to anyone else. This would be handy if you need
to generate watermarks in a CMS backend or some other administrative tool

------
simonhamp
The only real use case for this is as a watermarking tool that the end user
uses to place his own watermark on his own images and as has been mentioned
could provide a pre-composited file generated on the client to the server for
later public consumption.

Of course, this doesn't prevent the user uploading an image that they don't
have the rights to and watermarking it as if it was their own... that's a
whole other subject.

But it's a good demonstration of the capabilities available in modern browsers
:)

------
aikah
Would be more useful on the server. I don't know how it is impplemented, I
guess it uses canvas, fortunately there a few serverside canvas
implementations available.

~~~
_puk
Uses canvas as per the documentation:

"Converts all resources into an Image object by applying the function draw.
The draw function receives all resources as canvases..."

I went down the same thought process as you.. Would be useful on the server,
coupled with node-canvas.

Wonder whether it would be faster / more scalable than calling out to
ImageMagick to add gradients or text to an Image..

~~~
scaturr
I think this library could defer altering the window object until it is
certain it is in a browser context. The original design goal was for a
browser, but the issue has already come up on leveraging node-canvas to make
it useful on the server as well:

[https://github.com/brianium/watermarkjs/issues/11](https://github.com/brianium/watermarkjs/issues/11)

------
jasich
Very cool. I'm loving the ES6 source code.

------
kmfrk
I like the idea as obfuscation, and it's at least a very simple
implementation.

Good-looking batch watermarking is such a pain today.

