JSFiddle - React, Tailwind, and code Playground

by ngoctuan001

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.5/html2canvas.js"></script>
<div id="target-container">
    <img src="https://avatars3.githubusercontent.com/u/1698794?v=3&s=88">
    <textarea id="thai-font">
    ลดกระหน่ำทั้งกทม.
    ลดกระหน่ำทั้งกทม.
    ลดกระหน่ำทั้งกทม.
    ลดกระหน่ำทั้งกทม.
    </textarea>
    <img src="https://avatars2.githubusercontent.com/u/4608342?v=3&s=88">
</div>
<button id="btn">get base64</button>

<div id="result">
    Result:
    <img id="b-img"/>
    <p id="b-pre"></p>
</div>

CSS

#result {
  width: 100%;
}
#b-pre {
  background-color: #ddd;
  padding: 5px;
  word-wrap: break-word;
}
#thai-font{
  text-align: center;
  height: 200px;
  border: none;
  resize: none;
}

JavaScript

function toB64() {
  var b64;
  html2canvas(document.getElementById('target-container'), {useCORS: true}).then(function (canvas) {
    try {
      b64 = canvas.toDataURL("image/png");
    } catch (err) {
      console.log(err)
      alert(err)
    }
    document.getElementById('b-img').src = b64;
  }).catch(function onRejected(error) {
  });
}
document.getElementById('btn').addEventListener('click',toB64);