Chrome拡張機能のjavascriptを使用して、特定の領域のスクリーンショットを取得するにはどうすればよいですか？

Question

私は、ウィンドウ全体ではなく、現在のウィンドウの特定の部分のみのスクリーンショットを取りたいクロム拡張機能に取り組んでいます。今の
は、私はそれは、ページ全体のスクリーンショットを取りますが、私は私の与えられたのx、y座標のスクリーンショットをしたいクロム

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

のこのAPIを使用しています。
どうすれば同じことができますか？
ありがとうございました！

一つの可能​​なアプローチは、あろう

Answer 1

：

1. 使用CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)含有data URIにキャンバスを変換するために使用HTMLCanvasElement.toDataURL画像
2. をトリミングに対応するパラメータを利用する一方で、キャンバス上にスクリーンショットを描画しますイメージの表現、またはImageDataオブジェクトを返すためのCanvasRenderingContext2D.getImageData()オブジェクトは、必要に応じて異なります。

サンプルコード（、あなたがコンテンツスクリプトに内部ロジックを移動したい場合があり、ニーズに応じて、注意してください）：

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