크롬 확장 프로그램 용 자바 스크립트를 사용하여 스크린 샷 찍기

크롬 확장 프로그램 용 자바 스크립트를 사용하여 스크린 샷 찍기

---

JS를 사용하여 사진을 찍는 것과 관련하여 많은 검색을했지만 유용하지 않은 것 같습니다. 어떤 사람들은 내 상황에 맞지 않는 activeX 컨트롤을 사용한다고 말합니다. JS를 사용하여 사진을 찍고 서버에 업로드하고 싶었습니다.

---

Chrome 확장 프로그램에서 이것을 사용하고 있기 때문에 Tab API 에는 지정된 창에서 현재 선택된 탭의 보이는 영역을 캡처 할 수있는 captureVisibleTab 이라는 메서드 가 있습니다.

이를 사용하려면 권한 매니페스트에 "탭"을 추가하기 만하면 됩니다. 그리고 배경 페이지 나 팝업 (또는 다른 확장 페이지)에서 다음과 같이 해당 메서드를 호출하면됩니다.

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

{quality : 50}을 추가하여 속성을 제어하고 형식도 변경할 수 있습니다. 모두 위에서 언급 한 문서에 설명되어 있습니다.

HTML5의 아름다움은 HTML5 Canvas로 이미지를 변경할 수 있으며, 원하는 모든 것을 매우 쉽게 조작, 변형, 수정,자를 수 있습니다!

그것이 당신이 찾고있는 것이기를 바랍니다! 새해 복 많이 받으세요!

---

원래 답변이 주어 졌을 때 이것이 가능했는지 확실하지 않지만 Google은 이제 스크린 샷을 찍는 방법을 보여주는 예제를 사용할 수 있습니다.

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

이 페이지에서 "Test Screenshot Extension"을 검색합니다.

---

작업 예제를 찾고 있다면 전체 웹 페이지의 스크린 샷을 찍는 확장 기능이있는 저장소를 만들었습니다. 여기를보세요 : https://github.com/marcinwieprzkowicz/take-screenshot

---

기업 내부에있는 경우 IT는 DisableScreenshots 정책을 true로 설정할 수 있습니다. chrome : // policy로 이동하여이 키를 검색하여 확인할 수 있습니다.

---

나를 위해 일한 또 다른 접근 방식이 있습니다.
요구 사항은 다음과 같습니다.
(a) 크롬 확장으로 스크린 샷 캡처
(b) 스크린 샷은 투명한 배경이어야합니다.
(c) 스크린 샷은 HTTP를 통해 다른 프로세스로 전달되어야합니다.

이 섹션에서는 코드 조각 주소 지정 요구 사항을 제시합니다. (b)
유용한 참조는 다음과 같습니다.
크롬 확장 디버거 api
chrome devtools 프로토콜 디버거 도메인
마지막 함수에서 코드 읽기를 시작할 수 있습니다.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);
            }
        });
}

참고URL : https://stackoverflow.com/questions/4573956/taking-screenshot-using-javascript-for-chrome-extensions