我试图通过IE11中的html2canvas修复与将网页渲染到画布相关的错误。问题有点令人困惑：站点使用bootstrap 2.3网格实现负责任的布局。
删除了旧应用程序的过时链接。它不存在于指定的地址上。
这个问题在IE11中重现了onli并且一旦devtool打开就消失了，所以我的事件不知道如何调试它。
我实际上不知道IE11到底是怎么回事，但我找到了一种快速的猴子修补方式来解决它：
return new Promise(function(resolve) {
var documentClone = container.contentWindow.document;
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
if window url is about:blank, we can assign the url to current by writing onto the document
*/
container.contentWindow.onload = container.onload = function() {
var interval = setInterval(function() {
if (documentClone.body.childNodes.length > 0) {
initNode(documentClone.documentElement);
clearInterval(interval);
if (options.type === "view") {
container.contentWindow.scrollTo(x, y);
if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
documentClone.documentElement.style.top = (-y) + "px";
documentClone.documentElement.style.left = (-x) + "px";
documentClone.documentElement.style.position = 'absolute';
}
}
resolve(container);
}
}, 50);
};
documentClone.open();
documentClone.write("<!DOCTYPE html><html></html>");
// Chrome scrolls the parent document for some reason after the write to the cloned window???
restoreOwnerScroll(ownerDocument, x, y);
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
/*
#HERE
1) It seems IE 11 does not get right computed styles when clones a node (See function cloneNode) above.
2) In documentClone.replaceChild(...) IE 11 does not apply @media instructions.
That's can be checked
by alert('ndocumentClone ' + $('.row-fluid [class*="span"]', documentClone).css('float'));
or alert('documentElement ' + $('.row-fluid [class*="span"]', documentElement).css('float'));
These both statments shows 'left' for wide screen in Chrome and shows none in IE11 (without dev panel).
To fix that we need to re-apply styles somehow. Change the container width works but probably a better
way exists. Lets have this in mind.
*/
container.width = width + 1;
/* * */
documentClone.close();
});
以防任何人像我一样遇到这种情况：html2canvas提供了一个onclone方法，您可以在生成屏幕截图之前触摸DOM。这也将触发IE11中样式的重新计算。
html2canvas(
document.body,
{
allowTaint: true,
logging: false,
onclone: function(document) {
return $q(
function(resolve) {
$timeout(function() {
document.body.innerHTML = document.body.innerHTML; //<-- Hackerman was here
resolve();
}, 0);
});
}
}
);
这对我有用，我的好处是不需要修改我从npm获得的实现。 - 虽然我喜欢它，如果有人有更好的解决方案，因为这似乎很hacky