0
我試圖開發我的第一個Chrome擴展，將DOM元素轉換爲圖像。Chrome擴展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-ifable部分對象。意思是，DOM元素不能被傳送。在內容腳本中處理圖像。 – wOxxOm
在彈出窗口中，要獲取當前選項卡，幾乎總是要使用'chrome.tabs.query（{active：true，currentWindow：true}'（即包括'currentWindow：true'）。如果沒有它，您將在所有窗口中提供一個活動標籤列表，這會導致當前窗口中的活動標籤不能保證是列表中的第一個元素，如果你不包含'currentWindow：true'，你將會有一個間歇錯誤。 – Makyen