Blob Image Watermark Plugin For jQuery - Img2Blob.js

File Size: 77.6 KB
Views Total: 2649
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Blob Image Watermark Plugin For jQuery - Img2Blob.js

Img2Blob.js is a very light jQuery plugin which converts your image into an object and then places a customizable watermark inside it.

How to use it:

1. Insert your images into the webpage using data-img2blob attribute instead of src.

<img class="demo" data-img2blob="1.png">

2. Put the JavaScript file img2blob.js after the latest jQuery library.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/img2blob.js"></script>  

3. The JavaScript to convert the internal image url to blob url:

$(".demo").img2blob();  

4. Place a customizable watermark on the image:

$(".demo").img2blob({
  watermark: '',
  fontStyle: 'Arial',
  fontSize: '30',
  fontColor: 'black',
  fontX: 10,
  fontY: 50
});

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