3

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.

Tim Post
  • 33,371
  • 15
  • 110
  • 174
422
  • 5,714
  • 23
  • 83
  • 139
  • 2
    Is there some reason you want to do this? It would be simple to bypass a client side implementation of a watermark. – lucuma May 31 '12 at 21:17
  • What you are asking for is to modify the .gif client side then? NOT overlay with another .gif etc. I don't think you can modify a .gif client side with javascript, but I would love hear if this turns out to be wrong. – Mark Schultheiss May 31 '12 at 21:41
  • @MarkSchultheiss the gif is created by the user client side, from a series of images. Its all done clientside, and we would like to append watermark to final image before it is rendered as animated gif. – 422 May 31 '12 at 21:45
  • 1
    If you want to do all that, well this sounds like a job for PHP or another server side language. I don't even know how you created a gif image client side? – Nathan May 31 '12 at 22:14

1 Answers1

4

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.

Community
  • 1
  • 1
Dave Rager
  • 8,002
  • 3
  • 33
  • 52
  • Thankyou Dave. I love replies like this. If you are available to view our project, i would be happy to send the url to you privately. Ste. – 422 Jun 02 '12 at 01:03
  • @422 looks like an interesting challenge. If you want to contact me you can get me through my web site in my bio. – Dave Rager Jun 02 '12 at 03:10