Adding Logo or Watermark on Save

Watermarks or implemented logos annoying when you are presenting a picture on website but i have also concerns about using images without permisson.

Many of you probably know that 9gag was using this till 2016, when you save a picture from website it was adding a 9gag logo to the saved picture.

Honestly, i can't think any way to achive it.

I am using my custom ASP.Net MVC 5 CMS but any front-end solutions will be highly appreciated.


According to W3 we can recreate images in canvas via JavaScript:

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");

Since i am redrawing the image, i tink in theory there should be a way to merge two images. Is there anyway to intercept the process and add a logo or watermark?

Answers 1

  • Short version: don't think it's possible without a hack. If you want a watermark in the lower righthand corner, copy the bottom few pixels for each image, put the watermark on the full image, and hover the original corner over it.

    Long version: You can't intercept the "right click->Save Image As" functionality of the browser. What you can do is a kind of hack where the underlying image has the watermark, but you cover the watermark with the old copy of the image. If you want to put your website's name in the lower righthand corner of your images, then copy that small sliver of the image, then put the watermark there. Now in your app put two images wrapped in a div with relative positioning. Make the div the size of the original image, with absolute positioning and top/left: 0px, then put the corner on top and do bottom/right: 0px. Then if they right click anywhere but the bottom righthand corner and save, they'll get the image underneath, which has the watermark.

Related Articles