是否有可能使用jquery將我的網頁轉換爲圖像？

Question

我試圖將我的網頁轉換爲圖像。

• 首先我試着用html2canvas JS，但它不支持我的下拉菜單

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

• 然後我提到這個鏈接：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

現在我有點困惑，因爲它是可能用我的樣式替換我的網頁的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>'; 

如何分析我的網頁HTML創建這樣的SVG圖像..

Answer 1

是。使用.innerHTML讓你的頁面文字的HTML，並把它裏面<foreignObject>像在本教程中指出：

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>