How to save / export a DOM element to an image?

Question

I have a web page with a form element (with a known identifier) ​​and there are several DIVs inside the form, and the position of each div can be changed.

I would like to:

a) Save the current state of this form

// var currentForm=document.forms['myFrm'].innerHTML; 

probably will be enough ...

b) Save or export the entire form with the most recent position of each DIV to the image file.

// how to save / export javascript var currentForm to image file is a key issue.

Any help / pointer would be appreciated.

Answer 1

There is a library called Domvas that should do what you want.

This gives you the opportunity to take arbitrary DOM content and draw its canvas of your choice.

After that, exporting the image from the canvas element should be quite simple:

 var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); document.write('<img src="'+img+'"/>'); 

Answer 2

After several hours of research, I finally found a solution to take a screenshot of the element, even if the origin-clean FLAG checkbox is selected (to prevent XSS), so you can even capture, for example, Google Maps (in my case). I wrote a universal function to get a screenshot. The only thing you need is the html2canvas library ( https://html2canvas.hertzen.com/ ).

Example:

 getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) { // in the data variable there is the base64 image // exmaple for displaying the image in an <img> $("img#captured").attr("src", "data:image/png;base64,"+data); } 

Keep in mind that console.log() and alert() will not generate output if the image size is large.

Function:

 function getScreenshotOfElement(element, posX, posY, width, height, callback) { html2canvas(element, { onrendered: function (canvas) { var context = canvas.getContext('2d'); var imageData = context.getImageData(posX, posY, width, height).data; var outputCanvas = document.createElement('canvas'); var outputContext = outputCanvas.getContext('2d'); outputCanvas.width = width; outputCanvas.height = height; var idata = outputContext.createImageData(width, height); idata.data.set(imageData); outputContext.putImageData(idata, 0, 0); callback(outputCanvas.toDataURL().replace("data:image/png;base64,", "")); }, width: width, height: height, useCORS: true, taintTest: false, allowTaint: false }); } 

Answer 3

Do you want to do this completely in JavaScript? If so, one solution might be to convert HTML to SVG. Or maybe you can use <canvas and gt. tag and make it manually

Answer 4

I hope I understand you, it looks like you want serialization of <form> values:

In computer science, in the context of storing and transmitting data, Serialization is the process of converting a data structure or object into a sequence of bits so that it can be stored in a file, in a memory buffer, or a connection will be resurrected over the network later on the same or another computer surrounding Wednesday.

Comparing JavaScript sorting in JavaScript compares several methods using JavaScript and JavaScript libraries to serialize a form into a form that can be saved.