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

Question

I have a web page which has a form element (with its ID known) and inside the form there are multiple DIVs, and the position of each div may be changed.

What I'd like to do is:

a) Save the current state of this form

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

would probably suffice...

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

// how to save/export the javascript var of currentForm to an image file is the key question.

Any help/pointer would be appreciated.

Answer 1

After hours of research, I finally found a solution to take a screenshot of an element, even if the origin-clean FLAG is set (to prevent XSS), that´s why you can even capture for example Google Maps (in my case). I wrote an universal function to get a screenshot. The only thing you need in addition 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 console.log() and alert() won´t generate an output if the size of the image is great.

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 2

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

It gives you the ability to take arbitrary DOM content and paint it to a Canvas of your choice.

After that exporting an image from a canvas element should be pretty easy:

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

Answer 3

Do you want to do it completely in JavaScript? If so, one possible solution could be to transform the HTML to an SVG. Or maybe you can use the <canvas> tag and draw it manually.