Chrome uzantısında tek bir HTML öğesinin ekran görüntüsü nasıl alınır?

Question

captureVisibleTab olduğunu biliyorum, ancak bir sekmenin sonuç ekran görüntüsünü nasıl kesiyorum ki sadece tek bir HTML öğesi kalıyor?

Answer 1

Bunun için onMessage, sendMessage ve captureVisibleTab gerekir. onMessage, chrome.runtime, sendMessage ve captureVisibleTab yöntemlerinin her ikisi de tabs yöntemidir. tezahür dosyasında size manifest dosyaya tabs ve <all_urls> izinleri eklemek gerekir

Manifest

. Bu izinler olmadan çalışmayacak. içerik komut dosyasında İçerik Senaryo

"permissions": [ 
    "tabs", 
    "<all_urls>" 
], 

aşağıdakileri eklemeniz gerekir. Bu, aktif sekmenizin ekran görüntüsünü almak için arka plan sayfanızla iletişim kurmanızı sağlar. Sihirin

chrome.runtime.sendMessage({ chromeAction: "screenshot" }, function (imageString) { 
    console.log(imageString); 
}); 

Arkaplan Senaryo/İşte Sayfa

olduğunu. drawImage tuval yönteminin daha iyi anlamak için

Kırpma

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { 
    if (request.chromeAction === "screenshot") { 
     createScreenshot(function (dataURL) { 
      createImage(dataURL); 
     }); 
     return true; 
    } 
}); 

// here we create a new image 
function createImage(dataURL) { 
    // create a canvas 
    var canvas = createCanvas(500, 500); 
    // get the context of your canvas 
    var context = canvas.getContext('2d'); 
    // create a new image object 
    var croppedImage = new Image(); 

    croppedImage.onload = function() { 
     // this is where you manipulate the screenshot (cropping) 
     // parameter 1: source image (screenshot) 
     // parameter 2: source image x coordinate 
     // parameter 3: source image y coordinate 
     // parameter 4: source image width 
     // parameter 5: source image height 
     // parameter 6: destination x coordinate 
     // parameter 7: destination y coordinate 
     // parameter 8: destination width 
     // parameter 9: destination height 
     context.drawImage(croppedImage, 10, 10, 300, 300, 0, 0, 250, 250); 

     // canvas.toDataURL() contains your cropped image 
     console.log(canvas.toDataURL()); 
    }; 
    croppedImage.src = dataURL; // screenshot (full image) 
} 

// creates a canvas element 
function createCanvas(canvasWidth, canvasHeight) { 
    var canvas = document.createElement("canvas"); 

    // size of canvas in pixels 
    canvas.width = canvasWidth; 
    canvas.height = canvasHeight; 
    return canvas; 
} 

// calling the captureVisibleTab method takes a screenhot 
function createScreenshot(callback) { 
    // you can have two image formats (jpeg and png) 
    // for jpeg use { format: "jpeg", quality: 100 } (you can adjust the jpeg image quality from 0-100) 
    // for png use { format: "png" } 
    chrome.tabs.captureVisibleTab(null, { format: "png" }, callback); 
} 

tam documentation okuyun.