html2canvas创建一个宽度和高度为零的画布？ [英] html2canvas creates a canvas with a width and height of zero?

问题描述

我想使用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 code>< div>< p> hello world< / p>< / div> ，看起来是否正确。

Snippet

< pre class =snippet-code-js lang-js prettyprint-override> 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）;}}）;

 < script src =https://github.com/niklasvh/html2canvas/ releases / download / 0.4.1 / html2canvas.js>< / script>< div id =image>< / div>  

div>

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

解决方案

要作为画布渲染的元素需要在DOM中，例如 document.body 的子项，然后才能呈现。

I'm trying to use html2canvas do what it says on the tin, but it keeps creating a canvas with a width and height of zero. I'm doing this:

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);
    }
});

And when I print HTMLStringContainer it shows <div><p>hello world</p></div>, which looks correct.

Snippet

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);
  }
});

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<div id="image"></div>

Also, jsfiddle: http://jsfiddle.net/4077wxLj/

解决方案

The element to render as a canvas needs to be in the DOM, such as a child of document.body, before it can be rendered.

这篇关于html2canvas创建一个宽度和高度为零的画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！