How to take screenshot of the div that contain user Uploaded images in frontend?

Question

Please see this code . In the following code user can upload images , they can move, resize, rotate uploaded images etc .

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function previewImages() {
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;

    for (var i = 0; i < fileList.length; i++) {
      var objectUrl = anyWindow.createObjectURL(fileList[i]);
      var $newDiv = $("<div>", {
        class: "img-div"
      });
      var $newImg = $("<img>", {
        src: objectUrl,
        class: "newly-added"
      }).appendTo($newDiv);
      $(".new-multiple").append($newDiv);
      $newDiv.draggable();
      $newDiv.rotatable();
      $newDiv.resizable({
        aspectRatio: true,
        handles: "ne, nw, e, se, sw, w"
      });
      $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
      window.URL.revokeObjectURL(fileList[i]);
    }
    $(".newly-added").on("click", function(e) {
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation()
    });

    $(document).on("click", function(e) {
      if ($(e.target).is(".newly-added") === false) {
        $(".newly-added").removeClass("img-selected");
      }
    });
  }
   $(".user_submit").on("click",function(e){
   e.preventDefault();
   html2canvas($('.new-multiple'), {
     allowTaint: true,
	  onrendered: function(canvas) {
		document.body.appendChild(canvas);
		}
});
  
  
  });

});

.new-multiple {
  width: 400px !important;
  height: 400px !important;
  background: white;
  border: 2px solid red;
  overflow: hidden;
}

.img-div {
  width: 200px;
  height: 200px;
}

.newly-added {
  width: 100%;
  height: 100%;
}

.img-selected {
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
  border: 2px solid rgb(145, 44, 94);
}


/*
.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  background-color: white;
  border: 1px solid tomato;
}
*/

.ui-resizable-handle {
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  width: 14px;
  height: 14px;
}

.ui-resizable-nw {
  top: -7px;
  left: -7px;
}

.ui-resizable-ne {
  top: -7px;
  right: -7px;
}

.ui-resizable-e {
  top: calc(50% - 7px);
  right: -7px;
}

.ui-resizable-w {
  top: calc(50% - 7px);
  left: -7px;
}

.ui-resizable-sw {
  bottom: -7px;
  left: -7px;
}

.ui-resizable-se {
  right: -7px;
  bottom: -7px;
}

.ui-resizable-se.ui-icon {
  display: none;
}

.ui-rotatable-handle {
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  margin-left: calc(50% - 9px);
  bottom: -5px;
  width: 18px;
  height: 18px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/gh/godswearhats/[email protected]/jquery.ui.rotatable.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/godswearhats/[email protected]/jquery.ui.rotatable.min.js"></script>
 <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>

<form method="post" action="">


<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

<div class="new-multiple"></div>
<input type="submit" name="submit" class="user_submit" value="submit" />
</form>

https://jsfiddle.net/s99kxydw/15/

After uploading images , and rotate , move then the user will press submit button . That time we need to generate the screenshot of the window, so that both user and we can understand that what are the changes user done . This is our requirement .

How we can generate this screenshot ?

We found one solution . That is html2canvas https://html2canvas.hertzen.com/

But the problem is that html2canvas not support the css transform property

As the result the rotation is not coming in the screenshot . How we can over ride this . Please check the code .

is there is any other method without using html2canvas ?

Answer 1

html2canvas does not support most css properties (except the basic ones), one of which is transform as you may have already know and there is also no workaround (using html2canvas) for that unfortunately.

However, you can use a JavaScript canvas library called FabricJS which seems to be the most suitable to serve your purpose, such as manipulating (move, resize, rotate etc.) user uploaded image­(s).

The best part of using this library is that, you won't need to use html2canvas or any other additional libraries to take the screenshot. You can directly save the canvas (take screenshot) as image, since FabricJS is a canvas library by nature.

Here is a basic example demonstrating that :

var canvas = new fabric.Canvas('myCanvas', {
   backgroundColor: 'white'
});

function renderImage(e) {
   var imgUrl = URL.createObjectURL(e.target.files[0]);
   fabric.Image.fromURL(imgUrl, function(img) {
      // set default props
      img.set({
         width: 150,
         height: 150,
         top: 75,
         left: 75,
         transparentCorners: false
      });
      canvas.add(img);
      canvas.renderAll();
   });
}

function saveOnPC() {
   var link = document.createElement('a');
   link.href = canvas.toDataURL();
   link.download = 'myImage.png';
   link.click();
}

function saveOnServer() {
   $.post('https://your-site-name.com/save-image.php', {
      data: canvas.toDataURL()
   }, function() {
      console.log('Image saved on server!');
   });

   /* use the following PHP code for 'save-image.php' on server-side

   <? php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   $fileName = 'myImage.png';
   file_put_contents($fileName, $fileData);
	
   */
}

canvas{border:1px solid red}input{margin-bottom:6px}button{margin:10px 3px 0 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" onchange="renderImage(event)">
<canvas id="myCanvas" width="300" height="300"></canvas>
<button onclick="saveOnPC()">Save on PC</button>
<button onclick="saveOnServer()">Save on Server</button>

To learn more about the FabricJS library refer to it­'s Official Documentation.