CODEWITHSUNDEEP
javascripthtmlhtml2canvas
eugenesqr
eugenesqr

Reputation: 579

Rendering html string to canvas without showing the html itself

I would like to convert an html string to image similar to how it's done here: html2canvas creates a canvas with a width and height of zero?

However I don't want to show anything other than result image on the page. Thus I can't simply add the html string to the DOM as suggested there. I assume what I'm trying to achieve is possible because html2canvas test console does just that.

I tried the following which produces empty result:

var doc = document.implementation.createHTMLDocument();
doc.open();
doc.write("<html><header></header><body><div>test</div></body></html>");
doc.close();

html2canvas(doc.body, {
    onrendered:function(newCanvas) {
        document.body.appendChild(newCanvas);
    }    
});
<script src="https://github.com/niklasvh/html2canvas/blob/master/dist/html2canvas.js"></script>

Can anyone suggest the way of doing this?

Upvotes: 1

Views: 4610

Answers (1)

eugenesqr
eugenesqr

Reputation: 579

I figured that out. Here is the link which headed me to the right direction. It is also worth checking the source code of this page which illustrates the idea.

We set the

style="overflow:hidden"

attribute for the container and move the contents we want to render outside of the viewport with

style="position:absolute;top:0px;left:3000px;"

Hope that helps someone.

Upvotes: 4

Related Questions