我正在尝试将网页加载到隐藏框架(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";
使用resizeTo()
更改element.contentWindow
的大小,并更改正文的大小。它们似乎都没有对最终的屏幕截图产生影响,看起来像
最佳答案
尝试在包含 iframe(或包含 iframe 的脚本)后将其添加到父页面上。
$('iframe').load(function(){
$(this).css({
width: 1600,
height: 900
});
});
关于javascript - 调整隐藏框架的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21845504/