Lightweight javascript-based. Convert internal image url to blob url & add watermark.
<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" />
<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>
blob:http://...