Wie kann ich Screenshot eines bestimmten Bereichs mit Javascript in Chrome-Erweiterung machen?

Question

Ich arbeite an einer Chrome-Erweiterung, in der ich Screenshot nur eines bestimmten Teils des aktuellen Fensters, nicht das gesamte Fenster selbst machen möchte.
Vorerst habe ich diese API von Chrom unter Verwendung von

chrome.tabs.captureVisibleTab(null,{},function(dataUri){ 
      // datauri is the screenshot 
     }); 

Es nimmt den Screenshot der gesamten Seite, aber ich möchte Screenshot von meinem gegebenen x, y-Koordinaten.
Wie kann ich das gleiche erreichen?
Vielen Dank!

Answer 1

Ein möglicher Ansatz wäre:

1. Verwenden CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) den Screenshot auf die Leinwand, in der Zwischenzeit unter Verwendung von entsprechenden Parameter zeichnen das Bild
2. Verwenden HTMLCanvasElement.toDataURL zuzuschneiden Leinwand data URI ein konvertieren enthält Darstellung des Bildes, oder CanvasRenderingContext2D.getImageData(), um ein ImageData Objekt zurückzugeben, es hängt von Ihren Bedürfnissen ab.

Beispielcode (Bitte beachten Sie je nach Ihren Bedürfnissen, Sie innere Logik zum Inhalt Skripte bewegen möchten):

chrome.tabs.captureVisibleTab(null, {}, function(dataUri) { 
    var img = new Image(); 
    img.onload = function() { 
     var canvas = document.createElement('canvas'); 
     canvas.width = WIDTH; 
     canvas.height = HEIGHT; 
     var context = canvas.getContext('2d'); 
     // Assuming px,py as starting coordinates and hx,hy be the width and the height of the image to be extracted 
     context.drawImage(img, px, py, hx, hy, 0, 0, WIDTH, HEIGHT); 
     var croppedUri = canvas.toDataURL('image/png'); 
     // You could deal with croppedUri as cropped image src. 
    }; 
    img.src = dataUri; 
});