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>

是否可以使用jquery将我的网页转换为图像？

1 个答案: