Image watermarks with HTMLCanvas and JavaScript

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.

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.

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

 

 

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock