<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
	</head>
	<body>
		<h3>Default</h3>
<img class="sample1" data-img2blob="http://bachors.com/assets/imgs/user.png" />
<img class="sample1" data-img2blob="http://bachors.com/attachments/site_logo/df3b06e98ad681a6b5a68c43ed7cd465.png" />

<hr>

<h3>With Watermark</h3>
<img class="sample2" data-img2blob="http://bachors.com/assets/imgs/user.png" />
<img class="sample2" data-img2blob="http://bachors.com/attachments/site_logo/df3b06e98ad681a6b5a68c43ed7cd465.png" />
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript" src="//bachors.github.io/src/js/img2blob.js"></script><script>$(function() {

	// default
	$(".sample1").img2blob();
	
	// with watermark
	$(".sample2").img2blob({
		watermark: '@bachors',
		fontStyle: 'Arial',
		fontSize: '30', // px
		fontColor: '#e44', // 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>
	</body>
</html>