Screenshot maken met javascript voor Chrome-extensies

Ik heb veel gezocht met betrekking tot het maken van foto’s met JS, maar geen enkele lijkt nuttig te zijn. Sommigen zeggen dat ik activeX-besturingselementen gebruikt, wat niet bij mijn situatie past. Ik hoopte een foto te maken met JS en deze naar een server te uploaden.


Antwoord 1, autoriteit 100%

Omdat je dit in Chrome-extensies gebruikt, heeft de Tab APIeen methode met de naam captureVisibleTab, waarmee het zichtbare gebied van het momenteel geselecteerde tabblad in het opgegeven venster kan worden vastgelegd.

Om dat te gebruiken, voegt u gewoon “tabbladen” toe aan uw machtigingen-manifest. En vanaf je achtergrondpagina, of pop-up (of een andere extensiepagina), roep je die methode gewoon als volgt aan:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

U kunt de eigenschap beheren door {kwaliteit: 50} toe te voegen en ook de indeling te wijzigen, allemaal beschreven in de hierboven genoemde documenten.

Het mooie van HTML5, je kunt die afbeelding wijzigen met HTML5 Canvas, je kunt heel gemakkelijk manipuleren, transformeren, wijzigen, knippen, alles wat je wilt!

Hopelijk is dat wat je zoekt! Gelukkig nieuwjaar!


Antwoord 2, autoriteit 35%

Ik weet niet zeker of dit beschikbaar was toen het oorspronkelijke antwoord werd gegeven, maar Google heeft nu een voorbeeld beschikbaar dat laat zien hoe je screenshots kunt maken:

http://developer.chrome.com/extensions/samples.html

Zoek naar “Test Screenshot Extension” op deze pagina.

UPDATE: hier is het nieuwe voorbeeld met de desktopCaptureAPI:

https://github.com /GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture


Antwoord 3, autoriteit 8%

Als u op zoek bent naar een werkend voorbeeld, ik heb een repo met extensie gemaakt die een screenshot van de hele webpagina maakt. Kijk hier: https://github.com/marcinwieprzkowicz/take-screenshot


Antwoord 4, autoriteit 4%

Hier is een andere benadering die voor mij werkte.
De vereisten waren als volgt:
(a) maak een screenshot in een Chrome-extensie
(b) de schermafbeelding moet een transparante achtergrond hebben
(c) de screenshot moet naar een ander proces worden gecommuniceerd (via HTTP)

In deze sectie zal ik een codefragment-adresseringsvereiste presenteren (b)
Nuttige referenties zijn:
debugger-api voor Chrome-extensies
chrome devtools protocol debugger domein
Misschien wilt u beginnen met het lezen van code van de laatste functie attachToDebugger

function captureScreenshot(tabId) {
    logMsg(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);
    chrome.debugger.sendCommand(
        {tabId:tabId},
        "Page.captureScreenshot", 
        {format: "png", fromSurface: true},
        response => {
            if(chrome.runtime.lastError) {
                logMsg(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
            }
            else {
                var dataType = typeof(response.data);
                logMsg(`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`);
                saveScreenshotRemotely(response.data);
            }
        });
    logMsg(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}
//---------------------------------------------------------------------------
function setColorlessBackground(tabId) {
    logMsg(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);
    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Emulation.setDefaultBackgroundColorOverride",
        {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
        function () {
            logMsg(`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`);
            captureScreenshot(tabId);
        });
    logMsg(`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`);
}
//---------------------------------------------------------------------------
function enableDTPage(tabId) {
    logMsg(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);
    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Page.enable", 
        {}, 
        function () {
            logMsg(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
            setColorlessBackground(tabId);
            /*
             * you can comment 
             * setColorlessBackground(tabId);
             * and invoke 
             * captureScreenshot(tabId);
             * directly if you are not interested in having a 
             * transparent background
             */
        });
    logMsg(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}
//---------------------------------------------------------------------------
function attachToDebugger(tabId) {
    chrome.debugger.attach(
        {tabId:tabId}, 
        g_devtools_protocol_version,
        () => {
            if (chrome.runtime.lastError) {
                alert(chrome.runtime.lastError.message);
                logMsg(`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`);
            }
            else {
                logMsg(`{back}: debugger attach success: tabId=${tabId}`);
                enableDTPage(tabId);
            }
        });
}

Antwoord 5

Als u zich binnen een onderneming bevindt, kan uw IT het beleid DisableScreenshots instellen op true.
Je kunt het controleren door naar chrome://policy te gaan en naar deze sleutel te zoeken.

Other episodes