JSFiddle - React, Tailwind, and code Playground

by davidhequet

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          test blabla
          fsdfsd
          fsd
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="save">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS

body {
    background-color:silver;
    
}

JavaScript

$("#save").on("click",function(e) {
   
    // render content of modal body : crop : can be blurry
  html2canvas($("#myModal .modal-body"), {  
    onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }});
    
    // render modal without overlay :crop : blurry
   html2canvas($("#myModal .modal-dialog"), {  
    onrendered: function(canvas) {    
    document.body.appendChild(canvas);

  }});
    
    // render all the modal (including overlay) : no crop then cropping using int left/top value instead of float : no blur
  html2canvas($("#myModal"), {
    onrendered: function(canvas) {
        var printmodal = $("#myModal .modal-dialog");
        var left = parseInt(printmodal.offset().left);
        var top =  parseInt(printmodal.offset().top);
        var width = parseInt(printmodal.width());
        var height = parseInt(printmodal.height());
        var crop_canvas = document.createElement('canvas');
        crop_canvas.width = width;
        crop_canvas.height = height;
        crop_canvas.getContext('2d').drawImage(canvas, left, top, width, height, 0, 0, width, height);
        
        
    document.body.appendChild(crop_canvas);
  }});
    
    // render all the modal (including overlay) : no crop : no blur
    html2canvas($("#myModal"), {
    onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }});
    
  
 

    
    
    
});