Login

jQuery Image to Blob


jQuery plugin to convert internal image url to blob url & add watermark.

HTML:

<h3>Default</h3>
<img class="sample1" data-img2blob="img/1.png" />
<img class="sample1" data-img2blob="img/2.jpg" />
<hr>
<h3>With Watermark</h3> <img class="sample2" data-img2blob="img/1.png" /> <img class="sample2" data-img2blob="img/2.jpg" />

JS:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/img2blob.js"></script>     
<script>
$(function() {
   // default    $(".sample1").img2blob();   
   // with watermark    $(".sample2").img2blob({      watermark: '@bachors',      fontStyle: 'Arial',      fontSize: '30', // px      fontColor: '#333', // default 'black'      fontX: 50, // The x coordinate where to start painting the text      fontY: 50 // The y coordinate where to start painting the text    });
}); </script>

Result:

blob:http://...

Demo Fork me on GitHub