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

Question

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>

so replace the div with an image, or add an image to the div? — nick zoum, Jun 02 '17 at 06:55
would MDN documentation help? https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas — Jaromanda X, Jun 02 '17 at 06:57
no it should as div only, need to convert that div into image — Shamu, Jun 02 '17 at 06:57
@JaromandaX I have checked with the link. this method is converting only the text. cannot able to convert element other than text. — Shamu, Jun 02 '17 at 07:00
Maybe you want to have a look at [`replaceChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild) and [`replaceWith`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith) — nick zoum, Jun 02 '17 at 07:00
hi @nickzoum both these method will replace the old element with newly created element. But i don't need that. I want to convert that whole div into an image(including all elements). — Shamu, Jun 02 '17 at 07:19
@Shamu, So do you want to show an image in the background while still having the elements? — nick zoum, Jun 02 '17 at 07:22
@nickzoum I'm thinking he wants something like this: http://jsfiddle.net/8ypxW/3/ — Arg0n, Jun 02 '17 at 07:30
@Arg0n yes, i want exactly like that. But it used third party plugin html2canvas.js file to convert into image. I need without using that plugin. — Shamu, Jun 02 '17 at 08:32

WizardCoder · Answer 1 · 2017-06-02T09:50:38.580

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>

above code converts svg to an image. it is ok. but it doesn't convert other html elements like div, button. I want to convert those elements also as an image. Is there any other option to do that? — Shamu, Jun 02 '17 at 10:14
no, it should be as div element only. for div, button elements, it has to be converted to an image — Shamu, Jun 02 '17 at 10:37
Sorry, but as mentioned by @Arg0n, this is what you need jsfiddle.net/8ypxW/3. I know you don't want a plugin, but I am afraid I don't have the time or expertise to reinvent that plugin. Hopefully someone else will be able to help you out. — WizardCoder, Jun 02 '17 at 10:50

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

1 Answers1