Protect Your Images with Watermarker.js jQuery Plugin

watermarkjs is a lightweight and fast jQuery plugin that lets you easily add a watermark to any image uploaded through a file input element. It's useful when you want to protect your images from unauthorized use or promote your brand by displaying your logo or website.

The watermark, like a logo or text, repeats diagonally across the entire image. Users have the flexibility to adjust the watermark's position, size, and opacity to suit their specific needs. Additionally, the plugin processes the image and outputs it as a base64 string, ready for preview on your website or for upload to your server.

How it works:

When an image is uploaded, the plugin creates a hidden canvas element. Then, it draws the uploaded image onto the canvas and overlays the watermark image repeatedly in a diagonal pattern. You can adjust the spacing, size, and transparency of the watermark to achieve the desired effect. Finally, the plugin converts the watermarked canvas into a base64 string.

How to use it:

1. Include the jQuery library and the Watermarker.js script in your project.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/Watermarker.js"></script>

2. Set up an HTML file input where users will select the image they wish to watermark.

<input type="file" id="example">

3. Initialize the Watermarker.js plugin and specify the path to your watermarker image.

$(document).ready(function() {
  $("#example").watermarkImage("./logo.png", function(finalImage) {
    // finalImage: base64 image data
  });
});

4. Customize the watermarker settings to match your visual requirements. You can modify these options by passing an object as the third argument to the watermarkImage function.

$(document).ready(function() {
  $("#example").watermarkImage("./logo.png", function(finalImage) {
    // finalImage: base64 image data
  }, {

    // Distance between watermarks in pixels
    jarak: 50, 

    // Width/Height of the watermark in pixels.
    wmSizeX: 160,
    wmSizeY: 50,

    // Transparency of the watermark, with a value between 0 (transparent) and 1 (opaque).
    wmTrans: 0.5 
    
 });
});

---

This awesome jQuery plugin is developed by AlfianChandra. For more Advanced Usages, please check the demo page or visit the official website.