Html2Image

by fabriziopaino86

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
font size:
<select id="fontSize">
  <option value="12">small</option>
  <option value="16" selected>normal</option>
  <option value="22">large</option>
</select>

<div id="talltweets">
  The quick brown foxjihbjihji buhugyhugbhjiubhij bvhjbvhjubvhjubv hujgvhujbhbhuib jhvbhujbhujbhjub bujgbhjubhjbh <span class="high">bhhjbvhjbvhj</span> bhjbhjbvhjvb jvgjbvjbvhj jbvjhbhjbvhjbvhj jgbjgbhjbhjbhg</b> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh<br/><br/><br/><br/><br/>dsdfgsdfgsfdgsdff<br/><br/><br/><br/><br/>dfghdfghd fgh dfgh dfgh dfgh dfgh dfgh dfgh dfgh...

CSS

.high {
  color: #fff;
  background-color: #ff3366
}

#talltweets {
  padding: 23px;
}

JavaScript

$("#fontSize").change(function() {
  var sz = $(this).val();

  $("#talltweets").css("font-size", sz + "px");
  $("#talltweets").fadeIn(0);

  html2canvas(document.getElementById("talltweets"), {
    onrendered: function(canvas) {
      var screenshot = canvas.toDataURL("image/png");
      document.getElementById("textScreenshot").setAttribute("src", screenshot);
      $("#talltweets").fadeOut(0);
    }
  });
});