JSFiddle - React, Tailwind, and code Playground

by tgundogdu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    

<body>
<form id="Form1"  runat="server">
<div id="wrapper" style="background-color: red;">
		<p>Inside the wrapper 1</p>
		<p>Inside the wrapper 2</p>
		<p>Inside the wrapper 3</p>
		<p>Inside the wrapper 4</p>
		<p>Inside the wrapper 5</p>
		<p>Inside the wrapper 6</p>
		<p>Inside the wrapper 7</p>
		<p>Inside the wrapper 8</p>
		<p>Inside the wrapper 9</p>
		<p>Inside the wrapper 10</p>
		<p>Inside the wrapper 11</p>
		<p>Inside the wrapper 12</p>
		<p>Inside the wrapper 13</p>
		<p>Inside the wrapper 14</p>
		<p>Inside the wrapper 15</p>
		<p>Inside the wrapper 16</p>
		<p>Inside the wrapper 17</p>
		<p>Inside the wrapper 18</p>
		<p>Inside the wrapper 19</p>
		<p>Inside the wrapper 20</p>
		<p>Inside the wrapper 21</p>
		<p>Inside the wrapper 22</p>
		<p>Inside the wrapper 23</p>
		<p>Inside the wrapper 24</p>
		<p>Inside the wrapper 25</p>
		<p>Inside the wrapper 26</p>
		<p>Inside the wrapper 27</p>
		<p>Inside the wrapper 28</p>
		<p>Inside the wrapper 29</p>
		<p>Inside the wrapper 30</p>
    <p><a href="javascript:return false;" class="print-screen-button-link">Print Screen</a> - Click here to capture 1-49</p>
		<p>Inside the wrapper 31</p>
		<p>Inside the wrapper 32</p>
		<p>Inside the wrapper 33</p>
		<p>Inside the wrapper 34</p>
		<p>Inside the wrapper 35</p>
		<p>Inside the wrapper 36</p>
		<p>Inside the wrapper 37</p>
		<p>Inside the wrapper 38</p>
		<p>Inside the wrapper 39</p>
		<p>Inside the wrapper 40</p>
		<p>Inside the wrapper 41</p>
		<p>Inside the wrapper 42</p>
		<p>Inside the wrapper 43</p>
		<p>Inside the wrapper 44</p>
		<p>Inside the wrapper 45</p>
		<p>Inside the wrapper 46</p>
		<p>Inside the wrapper 47</p>
		<p>Inside the wrapper 48</p>
		<p>Inside the wrapper 49</p>
		
<p><a href="javascript:return false;" class="print-screen-button-linkx">Print Screen</a> - Click here to capture only what's visible in the...

CSS

#wrapper{
  height:500px;
  overflow:auto;
}

JavaScript

$(document).ready(function(){

    $('.print-screen-button-link').click(function (e) {

        e.preventDefault();

        var useWidth = $('#wrapper').prop('scrollWidth'); //document.getElementById("primary").style.width;
        var useHeight = $('#wrapper').prop('scrollHeight'); //document.getElementById("primary").style.height;

        html2canvas(document.getElementById("wrapper"), {width: useWidth, height: useHeight}).then(function (canvas) {
            //document.body.appendChild(canvas);

            var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
            //var image = canvas.toDataURL("image/png");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
            window.location.href = image; // it will save locally
        });


    });

});