close ✖
bypeople

Image watermarks with HTMLCanvas and JavaScript

4
Created by Admin on Nov 14 2014

It doesn’t annoy you the fact that after spending hours doing let’s say an illustration, you put it online with the intention of selling it or just share with the world, when suddenly everyone has it without giving you any credit and earnings being lower than what you expected?.

When these kinds of things happen, there are many possible solutions to keep people away from your artworks, some of them more secure than others but every one of them providing a certain level of security. An effective way to protect your images from average users is through watermarks, which is one of the most disturbing things because despite the fact that you can actually grab the image, removing the watermark is really stressful. With Watermark, a great JavaScript library, you can add watermarks to your images to protect them from burglars.

watermark00

The idea to create Watermark came from an original article from the same author named “How to create transparency in images with canvas”, which studied the main concept behind the creation of watermarks.  The basic steps to construct a watermark are:

  • Add your image into the canvas element.
  • Loop thru the image and set pixel by pixel the alpha value of your choice.
  • Get the canvas’ data URL.

watermark01

Your watermark doesn’t have to be a .PNG or .GIF file with transparency, because Watermark creates transparency even if you defined a .JPG as your watermark picture. Visiting the official site will grant you access to the complete documentation, free download link and a couple of nice demos plus:

  • Complete code in the main tutorial.
  • Adjustment parameters explained.
  • Logical part explained and easy to understand.

Original link: Watermark

Our Curators Become curator

Top

This a test message in global notification
Your download will start shortly.
bypeople
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople