Is it possible to convert my webpage into image using jquery?

Question

I have tried to convert my webpage to image.

First i tried using html2canvas JS, but it doesnt support my dropdowns

html2canvas(document.body, {
  onrendered: function(canvas) {
  document.body.appendChild(canvas);
}
});

Then i referred this link: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Now I'm little bit confused because is it possible to replace the html of my web page with my styles.

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
 '<foreignObject width="100%" height="100%">' +
 '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
 '<em>I</em> like ' +
 '<span style="color:white; text-shadow:0 0 2px blue;">' +
 '<select><option>1</option><option>1</option><option>1</option><option>1</option></select>'+
 'cheese</span>' +
 '</div>' +
 '</foreignObject>' +
 '</svg>';

how to parse my web page html to create a svg image like this..

Possible duplicate of [How to take screen shot of a div with JavaScript?](http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with-javascript) — choz, May 17 '16 at 06:36

score 1 · Accepted Answer · answered May 17 '16 at 06:42

Yes. Use .innerHTML to get the HTML of your page as text, and put it inside <foreignObject> like stated in the tutorial:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  document.querySelector('div').parentNode.innerHTML +
  '</foreignObject>' +
  '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">
  <em>I</em> like
  <span style="color:white; text-shadow:0 0 2px blue;">
           cheese</span>
</div>

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->

<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>

Is it possible to convert my webpage into image using jquery?

1 Answers1