div to image

by Chris Vitalos

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js"></script>


<div>
<canvas id="convert-me">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1WJnGC13fJYKPeVERz7N3wHaLH%26pid%3DApi&f=1"/>
</canvas>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>

JavaScript

(function($){    
	$("#btnSave").on("click", function(){
  		var canvas = document.getElementById("convert-me");
    	var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
    	window.open(fullQuality);
  	});
})(jQuery);