Làm cách nào để sử dụng chức năng drawWindow canvas trong một addon được tạo bằng cách sử dụng addon sdk?

Question

Tôi đã tạo một addon Firefox bằng cách sử dụng addon sdk. Tôi đang cố gắng sử dụng chức năng canvas drawWindow.

Tôi có mã sau để sử dụng hàm, trong đó ctx đề cập đến ngữ cảnh canvas, mà tôi nhận được với canvas.getContext("2d").

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); 

Khi tôi chạy mã này, trong một kịch bản mà được gắn bằng

tabs.activeTab.attach({ 
    contentScriptFile: data.url("app.js") // app.js contains the above line of code 
}); 

tôi nhận được lỗi sau:

TypeError: ctx.drawWindow is not a function 

lỗi này không xảy ra khi tôi gọi các chức năng như strokeRect và fillRect trên cùng một đối tượng ctx.

Tài liệu trên this page cho biết bạn cần đặc quyền của Chrome để sử dụng mã, do đó có thể có vấn đề. Tôi mong đợi một lỗi khác, dựa trên hàm code cho hàm.

Tôi phát hiện ra rằng tôi có thể sử dụng đặc quyền chrome trong tiện ích của mình bằng cách sử dụng this, nhưng tôi sẽ làm gì tiếp theo để sử dụng ctx.drawWindow?

Ngoài ra, khi tôi chạy mã trong this question, từ một miếng đệm trên một trang, thay vì từ một addon, thay vì "Lỗi: Thao tác không an toàn", tôi nhận được cùng một "Ngoại lệ: ctx.drawWindow là không phải là một hàm ". Vì vậy, về cơ bản những gì tôi yêu cầu là, làm thế nào tôi sẽ đi về sử dụng canvas drawWindow trong addon tạo ra bằng cách sử dụng addon sdk?

Chỉnh sửa: Tôi đang cố gắng làm điều này vì tôi cần một phương pháp để truy cập từng pixel riêng lẻ của trang được hiển thị. Tôi hy vọng sẽ vẽ trang thành canvas, sau đó truy cập pixel bằng cách sử dụng getImageData. Nếu có các phương pháp khác để truy cập các pixel riêng lẻ (trong một addon của Firefox), điều đó cũng sẽ hữu ích.

Answer 1

Đây là đoạn mã, được mượn từ mô-đun tab-browser cũ của SDK. Thao tác này sẽ giúp bạn có hình thu nhỏ của tab hiện tại mà không đính kèm vào tab.

var window = require('sdk/window/utils').getMostRecentBrowserWindow(); 
var tab = require('sdk/tabs/utils').getActiveTab(window); 
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); 
thumbnail.mozOpaque = true; 
window = tab.linkedBrowser.contentWindow; 
thumbnail.width = Math.ceil(window.screen.availWidth/5.75); 
var aspectRatio = 0.5625; // 16:9 
thumbnail.height = Math.round(thumbnail.width * aspectRatio); 
var ctx = thumbnail.getContext("2d"); 
var snippetWidth = window.innerWidth * .6; 
var scale = thumbnail.width/snippetWidth; 
ctx.scale(scale, scale); 
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)"); 
// thumbnail now represents a thumbnail of the tab 
console.log(thumbnail.toDataURL()); 

Từ đây bạn sẽ có thể lấy dữ liệu qua getImageData và chỉ bỏ qua phần mở rộng nếu bạn không muốn.