html2canvas兼容ie11,Html2canvas renders page with wrong layout in IE11

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to fix bug in related to rendering web page to canvas via html2canvas in IE11. Issues is a bit confusing: site implements responsible layout with bootstrap 2.3 grid.

When developer tools not opened it is rendered like for table/smartphones screen.

But if I press F12 (developer tools opens, no any other action performed) and click to render page it rendered as expected, for wide screen.

Removed outdated link to old application. Not it does not exists on specified address.

This issue reproduced onli in IE11 and disappears once devtool are opened, so I event do not know how to debug it.

回答1:

I am actually do not know what the hell with IE11, but I found a fast monkey-patching way to solve it:

return new Promise(function(resolve) {

var documentClone = container.contentWindow.document;

/* Chrome doesn't detect relative background-images assigned in inline

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("");

// 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();

});

回答2:

Just in case anybody encounters this like I did:

html2canvas provides an onclone-method, in which you can touch the DOM before the screenshot is generated. This will also trigger the recomputation of styles in 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);

});

}

}

);

This did the trick for me, with the upside of me not having to modify the implementation i got from npm.

- Though i'd love it if somebody has a better solution, since this seems quite hacky