How to Take Screenshot of a Div With JavaScript

How to take screenshot of a div with JavaScript?

No, I don't know of a way to 'screenshot' an element, but what you could do, is draw the quiz results into a canvas element, then use the HTMLCanvasElement object's toDataURL function to get a data: URI with the image's contents.

When the quiz is finished, do this:

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

When the user clicks "Capture", do this:

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

This will open a new tab or window with the 'screenshot', allowing the user to save it. There is no way to invoke a 'save as' dialog of sorts, so this is the best you can do in my opinion.

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

Following @ValfarDeveloper you can assign the value of the .src of the <img> to a data URI instead of a Blob URL and set the current HTML of ".new-multiple" at a <foreignObject> element within an <svg> string.

$(function() {  var inputLocalFont = $("#user_file");  inputLocalFont.change(previewImages);
  async function previewImages() {    var fileList = this.files;    var anyWindow = window.URL || window.webkitURL;
    for (var i = 0; i < fileList.length; i++) {      var objectUrl = await new Promise(resolve => {        var reader = new FileReader;        reader.onload = e => resolve(reader.result);        reader.readAsDataURL(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");    }    $(".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();   let html = $(".new-multiple").html();   let svg = `<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">    <foreignObject width="400px" height="300px"      requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">      <html xmlns="http://www.w3.org/1999/xhtml">      ${html}      </html>      </foreignObject></svg>`;      $("body").append(svg);    });
});

.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/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/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>

Take Screenshot of html element for mobile view using JavaScript

There might be better ways to solve it but this is the one I used.

First remove Html table responsive class

document.getElementById('table-you-want-convert').classList.remove("table-responsive");

Change html2canvas function to

html2canvas(document.getElementById("table-you-want-convert"),{
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
         //save or download image
         //add responsive class again
        document.getElementById('table-you-want-convert').classList.add("table-responsive");       

   }

How to take screenshot of a div which contains video and canvas?

html2canvas cannot reproduce a video screenshot. It generates an image by reading a page's HTML elements and rendering a picture of them according to the CSS styling information. It doesn't actually take a screenshot.

How to Take Screenshot of a Div With JavaScript