html2canvas 创建宽度和高度为零的画布？

Question

我正在尝试使用 html2canvas 执行它在锡上所说的操作，但它不断创建宽度和高度为零的画布。我正在这样做：

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
    onrendered:function(newCanvas){
        document.getElementById("image").appendChild(newCanvas);
    }
});

当我打印时，HTMLStringContainer它显示<div><p>hello world</p></div>，这看起来是正确的。

片段

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
    onrendered:function(newCanvas){
        document.getElementById("image").appendChild(newCanvas);
    }
});

var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer, {
  onrendered: function(newCanvas) {
    document.getElementById("image").appendChild(newCanvas);
  }
});

另外，jsfiddle： http: //jsfiddle.net/4077wxLj/

Answer 1

要呈现为画布的元素需要位于 DOM 中，例如 的子元素document.body，然后才能呈现。