dom-to-image

by HemalathaThanigaivel

HTML

<script src="https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js"></script>

<div id="foo">
  <div >foo</div>
<textarea>Change this if you want and take the picture</textarea>
</div>

CSS

#foo > div {
  border:3px solid green;
  padding: 4px;
  background-image:url('https://www.gravatar.com/avatar/24549529eb215f43aa59bbd041492527/?default=&s=64')
}

JavaScript

const render = node =>
  domtoimage.toPng(node)
  .then(dataUrl => {
  console.log(dataUrl)
   /*  const img = new Image();
    img.src = dataUrl;
    $('body').append(img); */
  })
  .catch(error =>
    console.error('oops, something went wrong!', error)
  );

const foo = document.getElementById('foo');

var pf=performance.now();
render(foo);