0
初めてのクロムエクステンションを開発して、DOM要素を画像に変換しようとしています。クロムエクステンションdom要素から画像
これを実現する方法を理解して理解するためにサンプル拡張を見ていますが、特定の要素ではなくページ全体からイメージを作成するための非常に良い例がいくつかあります。
私はまたキャンバスを画像に保存するいくつかのjavascriptライブラリ（https://html2canvas.hertzen.com/）も見ました。
は、これまでのところ私は、スクリプトトリガするポップアップやボタンで基本的な設定を作成しました：
function handleDOM (results){
console.log('ELEMENT:', results)
html2canvas($(results), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
}
$('#btn-thumbnail').click(function(){
chrome.tabs.query({active: true}, function(tabs) {
var tab = tabs[0];
chrome.tabs.executeScript(tab.id, {
code: 'document.getElementById("elementId")'
}, handleDOM);
});
})
をしかし、これは私がhtml2canvasを推測していますので、仕事を見つけるためにDOMへのアクセスを必要としません。素子。
これにアプローチする方法についてのご意見は大変ありがとうございます。 TIA！
executeScriptは、オブジェクトのJSON可能な部分の結果のみを転送します。つまり、DOM要素は転送できません。コンテンツスクリプトでイメージを処理します。 – wOxxOm
現在のタブを取得するには、ほとんどの場合、 'chrome.tabs.query（{active：true、currentWindow：true}'（つまり 'currentWindow：true'を含む）を使用したいと思います。現在のウィンドウ内のアクティブなタブがリストの最初の要素であることが保証されていないすべてのウィンドウ内のアクティブなタブのリストを提供する 'currentWindow：true'を含まない場合、間欠的バグ。 – Makyen