0

私のbackground.js divの特定の領域をキャプチャします。私はcrop the image and sendまたはsend image with position, width and height to cutを希望 特定の可視タブをキャプチャして送信

function main() 
{ 
    chrome.tabs.query({'active': true}, check_tab); 
} 
function check_tab(tabs) 
{ 
    for (i = 0; i < tabs.length; i++) { 
     var url = tabs[i].url; 
     if (-1 < url.indexOf("https://www.specificurl")) { 
      chrome.tabs.captureVisibleTab(null, {'format': "png"}, function(img){ 
       $.ajax({ 
        type: "POST", 
        url: "http://mywebsite.com/doSomething.php", 
        data: "img=" + img 
       }); 
      }); 
     } 
    } 
} 

よう

私のコードが見えます。それが最初のケースであろうと第2のケースであろうと、正確にカットするdivの位置、幅、高さにアクセスする必要があります。 chrome.tabsでウェブページのソースコードを取得するにはどうすればよいですか?

おかげ

答えて

1

このopen source projectを見てみましょうvar html = $('html').html();document.documentElement.innerHTML

chrome.tabs.executeScript(tabs[0].id, {"code": "var html = document.documentElement.innerHTML;"}, function(html) { 
    console.log(html); 
}); 

を使用し、現在のページのHTMLを取得するには、それが基本的な考え方、Webページで選択した領域をキャプチャすることができますキャンバスを使用して画像を描画すると、キャンバスを特定の位置、幅、高さで切り抜くことができます。

+0

私は同様のプロジェクト([html2canvas](https://html2canvas.hertzen.com/))で試してみましたが、Flashディスプレイのスクリーンショットを作りたいので動作しません。 問題は、コードがchrome拡張子にあり、 'html = $( 'html').html();' – Rodrigue

+0

@Rodrigue 'var html = $( 'html')を使用することです。 html(); 'あなたは[コンテンツスクリプト](https://developer.chrome.com/extensions/content_scripts)を使用する必要があります – dan

+1

@ dan75、私は答えを編集しました、あなたはコンテンツスクリプトを使用することができますまたは単にプログラミングを使用する現在のDOMを取得します。 –

関連する問題