JavaScript Library For Creating Watermarks On Images – WatermarkIt

Category: Image , Javascript | March 3, 2016
Author: lykken
Views Total: 1,647
Official Page: Go to website
Last Update: March 3, 2016
License: MIT

Preview:

JavaScript Library For Creating Watermarks On Images – WatermarkIt

Description:

WatermarkIt is a vanilla JavaScript library that allows you to apply an image watermark to your images.

How to use it:

Load the watermarkit.js library in the document when needed.

<script src="js/watermarkit.js"></script>

Add a CSS class ‘watermarkme’ to your image.

<img src="image.jpg" class="watermarkme">

Apply a custom image watermark to the image.

var watermarkIt = new WatermarkIt({

    // image selector
    imageToWatermark: "watermarkme", 

    // path to watermark image
    watermarkPath: "./images/watermark.png", 

    // bottom padding in pixels
    paddingBottom: 0, 

    // size of watermark
    watermarkSize: 20

});

watermarkIt.mark();

The required CSS styles.

.watermarkit-container {
  position: relative;
  display: inline-block;
}

.watermarkit {
  position: absolute;
  z-index: 1;
 width;
 100%;
  height: 100%;
  visibility: hidden;
}

.watermarkit img {
  width: 100%;
  height: 100%;
  z-index: 2;
  margin-left: 0px;
  margin-bottom: 0px;
}

You Might Be Interested In:


Leave a Reply