[Solved] How to convert a div in a HTML page into Image without using Canvas?

How can we convert a div element into an image without using canvas?

The browser that organization currently uses is IE8 and canvas is not compatible with it.

I’m looking for a solution using only JavaScript/jQuery.

Solution #1:

Yes we can convert a div element into an image by using dom-to-image.

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript.

var node = document.getElementById('my-node'); //assign our dom id to a variable
domtoimage.toPng(node)
.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img); //append the converted image to html body
})
.catch(function (error) {
    console.error('oops, something went wrong!', error);
});

Here is the simple example of converting html dom to image

Respondent: Karthick Kumar
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.