調整隱藏幀的大小

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