CODEWITHSUNDEEP
jquery
Janani Kumar
Janani Kumar

Reputation: 371

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

I have tried to convert my webpage to image.

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..

Upvotes: 1

Views: 336

Answers (1)

Fabricator
Fabricator

Reputation: 12772

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>

Upvotes: 1

Related Questions