调整隐藏框架的大小

Question

我正在尝试将网页加载到隐藏框架（sdk / frame / hidden-frame）中，然后渲染它的屏幕截图。我可以很好地获得截图，但框架尺寸不合适。使用以下代码

呈现屏幕截图

var hiddenFrames = require("sdk/frame/hidden-frame");
let hiddenFrame = hiddenFrames.add(hiddenFrames.HiddenFrame({
    onReady: function() {
        this.element.contentWindow.location = "http://example.com";
        let self = this;
        this.element.addEventListener("DOMContentLoaded", function() {
            var cnvs = self.element.contentDocument.createElement("canvas");
            var width = self.element.contentDocument.body.clientHeight; //for some reason clientWidth is 0 for www.example.com
            var height = self.element.contentDocument.body.clientHeight;
            cnvs.width = width;
            cnvs.height = height;
            var ctx = cnvs.getContext("2d");
            console.log(width+" "+height);
            ctx.drawWindow(self.element.contentWindow, 0, 0, width, height, "rgb(255,255,255)");
            console.log(cnvs.toDataURL());
        }, true, true);
    }
}));

我尝试用

更改iframe的宽度和高度

this.element.width = "1600";
this.element.height = "900";

使用element.contentWindow更改resizeTo()的大小，并更改正文的大小。它们似乎都没有对最终截图产生影响，看起来像是

Answer 1

尝试在包含iframe（或包含iframe的脚本）之后在父页面上添加此内容。

$('iframe').load(function(){
    $(this).css({
       width: 1600,
       height:  900
    });
});