jqueryを使用して自分のウェブページを画像に変換することはできますか？

Question

自分のウェブページをイメージに変換しようとしました。

• まず、私は、このリンクを参照し、私はhtml2canvasのJSを使用してみましたが、それは私のドロップダウン

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

• をサポートしてdoesntの：それはあるのでhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

は、今私は少し混乱しています私のウェブページのhtmlを自分のスタイルに置き換えることが可能です。

このようなSVG画像を作成するために、私のWebページのHTMLを解析する方法

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>'; 

..

Answer 1

はい。テキストとしてページのHTMLを取得し、チュートリアルで述べたように<foreignObject>の内側にそれを置くために.innerHTMLを使用します。

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>