How to convert all elements inside html div element into an image using javascript without any third party library

Question

How to convert all elements inside html div element into an image using javascript without any third party library

838 Views Asked by Shamu At 06 April 2025 at 08:50

I am having a div with 3 elements. I want to convert that whole div into an image without using third party tool. Kindly provide me any suggestion regarding this.

<!DOCTYPE html>
<html>
<body>
<div id="div1">DIV 1<br>
<svg width="50" height="50">
<path d="M0,0 L50,0 L50,50 Z"
    style="stroke: #006666; fill:none;"/>
</svg>
<div>DIV 2</div>
<input type="button" value="Button"/>
</div>
</body>
</html>

Original Q&A

There are 1 best solutions below

**WizardCoder** · Answer 1

This is probably a good starting point. I have slightly modified the answer from this question https://stackoverflow.com/a/27232525/8085668. I have just removed the callback and added a click event. Please refer to it for a detailed explanation of the code.

var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
var btn = document.getElementsByClassName('convert2Png')[0];

function drawInlineSVG(ctx, rawSVG) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;
    
    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
    };
    
    img.src = url;
}

// usage:
btn.addEventListener('click', function() {
  drawInlineSVG(ctxt, svgText);
});

<!DOCTYPE html>
    <html>
    <body>
    <div id="div1">DIV 1<br>
    <svg width="50" height="50" id="myViewer" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <path d="M0,0 L50,0 L50,50 Z"
        style="stroke: #006666; fill:none;"/>
    </svg>
    <div>DIV 2</div>
    <input class="convert2Png" type="button" value="Button"/>
    <canvas id="canvas" width=800 height=600 style="margin-top:10px;"></canvas>
    </div>
    </body>
    </html>

How to convert all elements inside html div element into an image using javascript without any third party library

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in EXPORT-TO-IMAGE

Trending Questions

Popular # Hahtags

Popular Questions