JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>


<div>
We don't care about this part
</div>

<section>
Lets check this part<br>
<img src="https://via.placeholder.com/150"/>
^<a href="https://github.com/niklasvh/html2canvas-proxy-nodejs">proxy</a> needed to get image
</section>

<section>
Lorem ipsum dolor sit amet, <b>asdfasdf</b> consectetur adipisicing elit. Quasi reprehenderit perspiciatis aliquid, labore autem ad nemo quam dolor quas eligendi, harum quae debitis beatae est porro voluptate. Itaque, eligendi, dolores. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat et enim impedit vero omnis expedita nisi laborum ratione eum iure dolore rem nobis ipsam blanditiis a, placeat debitis cum quos. 
<ul>
  <li>Here</li>
  <li>is</li>
  <li>some</li>
  <li>formatting</li>
</ul>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nihil, harum soluta dignissimos vero, at ipsam sed distinctio inventore totam, qui cupiditate ipsum laudantium eos. Repellat delectus architecto provident, sequi.
</section>

<button onclick="thomas(600, 'section')">
Start Test
</button>

CSS

div, section {
  font-family: sans-serif;
  padding: 20px;
  background: #efefef;
  margin: 10px;
}

JavaScript

function thomas(winWidth, selector) {

  document.querySelector('body').style.width = winWidth + 'px';
  var grabItems = document.querySelectorAll(selector);

  if (grabItems.length > 1) {
    for (let i = 0; i < grabItems.length; i++) {

      html2canvas(grabItems[i], {
        useCORS: true,
      }).then(function(canvas) {
        var imageURL = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        a.href = imageURL;
        a.download = imageURL;
        a.click();
      });
      
    }
  }

}