首页 > 技术文章 > html2canvas绘制bug

yida915 2017-02-27 10:32 原文

使用html2canvas的时候,经常出现没出现在屏幕里面的部分就画成黑色,在github上找到了

This issue can be shown as a duplicate of previous issues #542#511#588, etc. However the problem is still open.

Html2canvas is successful when the bounds of the window is never changed and the target element is always %100 visible on the screen. However, this assumption is not always valid. When the bounds of the window is changed or scroll down/up operations only effects the bounds of the defaultView, but the dom structure remains the same after first initiation. In order to fix the problem I applied the following change in the source code and works fine for my case. Hope it can be placed in 0.5.0 release.

  • renderDocument expects the windowWidth and windowHeight values. But the actual values (core.js, line 44) refers to document.defaultView.innerWidth and document.defaultView.innerHeight values. If the size of the view changed, unless your element is a part of the actual document, rendering do not take into consideration of your whole element, it only renders the visible area. If you pass appropriate values, it renders the whole element without any problem.

if you call renderDocument( node.ownerDocument,
options,
options.innerWidth, //first width of the window when the document is created
options.innerHeight,//first heightof the window when the document is created 
index )
like this it works properly.

推荐阅读