Question

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

当开发者工具未打开时，它会呈现为表/智能手机屏幕。
但是，如果我按F12（开发人员工具打开，没有执行任何其他操作）并单击以呈现页面它按预期呈现，用于宽屏幕。

删除旧应用程序的过期链接。不是在指定的地址上不存在。

这个问题在IE11中重现了，并且一旦devtool打开就会消失，所以我的事件不知道如何调试它。

Answer 1

我实际上不知道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();
    });

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在IE11中呈现错误布局的页面未打开devtools

2 个答案: