Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

brianium.github.io

Post reply on HN
Print view View original

21–28 of 28 posts

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#21

Post by scaturr »

dspillett wrote: post #17
jarnix wrote: post #3

Watermarking in the browser seems counter productive though.

If there is a way of saving the result and posting it to the server (caveat: I have no idea if there currently is, there almost certainly isn't in a "95 of web users will have a compatible client" sort of way) then you could use this to remove some CPU load when accepting images that you want to watermark before presenting to other users. If it is your image being watermarked you are unlikely to circumvent the proces…

Yes. Absolutely. The library includes a blob() function for converting a watermarked image to a blob for use with FormData. The site has a demo that does just this for uploading to S3. Any browser supporting File API, FormData, and typed arrays should have no problems. IE 10 is the earliest IE that supports these APIs out of the box, but there are polyfills for IE9. The other modern browsers have supported these APIs for a while now.

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#22

Post by 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

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#23

Post by _puk »

aikah wrote: post #16

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.

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..

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#24

Post by scaturr »

hobarrera wrote: post #22

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

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 :)

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#25

Post by scaturr »

_puk wrote: post #23
aikah wrote: post #16

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.

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..

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

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#26

Post by dspillett »

scaturr wrote: post #21
dspillett wrote: post #17

Earlier quoted context omitted.

If there is a way of saving the result and posting it to the server (caveat: I have no idea if there currently is, there almost certainly isn't in a "95 of web users will have a compatible client" sort of way) then you could use this to remove some CPU load when accepting images that you want to watermark before presenting to other users. If it is your image being watermarked you are unlikely to circumvent the proces…

Yes. Absolutely. The library includes a blob() function for converting a watermarked image to a blob for use with FormData. The site has a demo that does just this for uploading to S3. Any browser supporting File API, FormData, and typed arrays should have no problems. IE 10 is the earliest IE that supports these APIs out of the box, but there are polyfills for IE9. The other modern browsers have supported these APIs…

Interesting. I didn't realise those things had progressed so far into "generally stable and usable" territory client-side - an occupational hazard due to most of our clients being stuck on IE8 so I only play with less ancient "standards" when I find time for projects outside the day-job. I really need to try arrange some proper play time for myself soon!

Re: Show HN: Watermark.js – Functional ES6 lib for watermarking in the browser

#28

Post by kuschku »

artursapek wrote: post #20
nathankleyn wrote: post #15

Earlier quoted context omitted.

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.

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

Still, the image would somehow have to be loaded in the browsers, at which point it’s easy to circumvent.
Post reply on HN