CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

How do I add a watermark to an image client-side with JavaScript?

Is it possible to add a watermark ( text or image ) to an animated gif , clientside using jquery.

In this instance all processing is client side.

I cant get it to work on jsfiddle. But its very simple, the watermark is added to the main image.

The issue I have is I need this to work on animated gifs. So the watermark displays bottom right hand corner.

The master js code is: http://www.patrick-wied.at/static/watermarkjs/jq/

The script on page:

var config = {
    "path": "watermark.png"
};
$(document).ready(function() {
    $(document).watermark(config);
});

My only issue is, normally we could process this using imagemagik gd , and php etc.. but this must work clientside. So any suggestions please.

Upvotes: 3

Views: 11913

Answers (1)

Dave Rager
Dave Rager

Reputation: 8150

There is no client side JavaScript that you can use to physically alter the original image file itself. However, using the canvas element you can play around with the image data.

The watermark.js script that you link to works by drawing the image to a canvas element and then writing the watermark image over top. I believe it then replaces the original image source with the canvas data using something like img.src = canvas.toDataURL();.

To do something like this with an animated gif you will have a bit more work to do. In particular, you will need to get the gif as raw binary and parse out each frame and do something like above. You will also need to animate the gif yourself since the browser is no longer rendering it, you are.

The answers posted to this question will be a good place to start. You will also need to look into the gif format itself.

All this being said, if you want to protect your image with a watermark you need to do it server side. Anything done on the client side can be defeated simply by disabling JavaScript and/or viewing source to grab the original image url. The watermark.js script is also vulnerable to the same. I think it's an interesting exercise and might deter a casual visitor from ripping off an image. However, anyone determined enough could defeat this easily.

Upvotes: 4

Related Questions