JSFiddle - React, Tailwind, and code Playground

by Anuchit Yai-in

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.min.js?_=1448265776394"></script>
<div id="widget">
    <p class="cell value" style="font-family: monospace;">HELLO ยินดีต้อนรับ</p>
    
    <p>Hello ยินดีตอนรับ</p>
</div>


<input type="button" id="btnSave" value="Save PNG"/>
<br/>
<br/>
<img id="img-out" src="" />

CSS

.cell.value {
    text-align: left;
    padding-right: 5px;
    
}

JavaScript

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas(document.getElementById("widget"), {
            onrendered: function(canvas) {
                var url = canvas.toDataURL();
                $("#img-out").attr("src",url);
				console.log(url);
                
            }
        });
    });
});