Html2canvas 在未打开 devtools 的情况下在 IE11 中呈现布局错误的页面

Question

我正在尝试修复与在 IE11 中通过 html2canvas 将网页呈现为 canvas 相关的错误。问题有点混乱：站点使用 bootstrap 2.3 网格实现负责任的布局。

当开发者工具未打开时，它呈现为 for table/smartphones 屏幕.
但是如果我按 F12（开发者工具打开，没有执行任何其他操作）并单击以呈现页面 它按预期呈现, 对于宽屏.

已将过时的 link 删除到旧应用程序。不是它不存在于指定地址。

这个问题只在IE11中重现，打开devtool后就消失了，所以我不知道怎么调试。

Answer 1

其实我不知道IE11到底是怎么回事，不过我找到了一个快速的monkey-patching方法来解决它：

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

Answer 2

以防有人像我一样遇到这种情况： 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 获得的实现。 - 如果有人有更好的解决方案我会很高兴，因为这看起来很老套

Html2canvas 在未打开 devtools 的情况下在 IE11 中呈现布局错误的页面

Html2canvas renders page with wrong layout in IE11 whed devtools not opened

twitter-bootstrap

html2canvas