자바 스크립트로 웹 페이지의 스크린 샷을 찍으시겠습니까?

JavaScript로 웹 페이지의 스크린 샷을 찍어 서버에 다시 제출할 수 있습니까?

브라우저 보안 문제와 관련이 없습니다. HTA를 위한 구현이 될 것입니다 . 그러나 가능합니까?

ActiveX 컨트롤을 사용하여 HTA에 대해이 작업을 수행했습니다. 스크린 샷을 찍기 위해 VB6에서 컨트롤을 작성하는 것은 매우 쉽습니다. SendKeys가 PrintScreen을 수행 할 수 없으므로 keybd_event API 호출을 사용해야했습니다. 그 코드는 다음과 같습니다.

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

창을 클립 보드로 가져 오는 것까지만 가능합니다.

스크린 샷을 원하는 창이 HTA 인 경우 다른 옵션은 XMLHTTPRequest를 사용하여 DOM 노드를 서버로 보낸 다음 서버 측 스크린 샷을 만드는 것입니다.

Google은 Google+에서이 작업을 수행하고 있으며 유능한 개발자가 리버스 엔지니어링하여 http://html2canvas.hertzen.com/을 제작했습니다 . IE에서 작업하려면 http://excanvas.sourceforge.net/ 과 같은 캔버스 지원 라이브러리가 필요합니다 .

내가 발견 한 또 다른 해결책은 http://www.phantomjs.org/ 입니다 . 이 페이지를 사용하면 페이지의 스크린 샷을 훨씬 쉽게 찍을 수 있습니다. 이 질문의 원래 요구 사항이 더 이상 유효하지 않지만 (다른 작업) PhantomJS를 향후 프로젝트에 통합 할 것입니다.

Pounder는 이것이 가능하다면 전체 몸 요소를 canvase로 설정 한 다음 canvas2image?

http://www.nihilogic.dk/labs/canvas2image/

Windows에서 실행 중이고 .NET이 설치된 경우 가능한 방법은 다음과 같습니다.

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

그리고 PHP를 통해 다음을 수행 할 수 있습니다.

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

그런 다음 서버 측에 스크린 샷이 있습니다.

이것이 이상적인 솔루션은 아니지만 언급 할 가치가 있습니다.

Snapsie 는 Internet Explorer 스크린 샷을 캡처하고 저장할 수 있는 오픈 소스 ActiveX 개체입니다. DLL 파일이 클라이언트에 등록되면 스크린 샷을 캡처하고 JavaScript를 사용하여 파일을 서버에 업로드 할 수 있어야합니다. 단점 : 클라이언트에서 DLL 파일을 등록해야하며 Internet Explorer에서만 작동합니다.

버그보고에 대해서도 비슷한 요구 사항이있었습니다. 인트라넷 시나리오를 위한 것이기 때문에 Firefox 용 Fireshot 및 Internet Explorer 용 IE Screenshot 과 같은 브라우저 애드온을 사용할 수있었습니다 .

SnapEngage는 사용하는 Java 애플릿 브라우저의 스크린 샷을 만들기 위해 (1.5 이상)을. AFAIK, java.awt.Robot작업을 수행해야합니다-사용자는 애플릿이 한 번만 허용하도록 허용해야합니다.

그리고 나는 그것에 관한 게시물을 찾았습니다.

• ActiveX를 사용하지 않고 웹 사이트의 스크린 샷을 찍는 스택 오버플로 질문 JavaScript 코드
• 블로그 게시물 SnapABug의 작동 방식 및 작동 방식

HTA와 VBScript 를 사용하여 달성 할 수 있습니다 . 외부 도구를 호출하여 스크린 샷을 수행하십시오. 이름이 무엇인지 잊었지만 Windows Vista에는 스크린 샷을 만드는 도구가 있습니다. 추가 설치가 필요하지 않습니다.

자동과 마찬가지로 사용하는 도구에 따라 다릅니다. API가있는 경우 사용자가 수행 한 작업을 알지 않고도 몇 가지 Visual Basic 호출을 통해 스크린 샷 및 저장 프로세스를 트리거 할 수 있습니다.

HTA에 대해 언급 했으므로 Windows를 사용 중이고 환경 (예 : OS 및 버전)을 잘 알고 있다고 가정합니다.

그 발견 DOM - 투 - 이미지 (훨씬 더 html2canvas보다) 좋은 일을했다. 다음 질문 및 답변을 참조하십시오 : https : //.com/a/32776834/207981

이 질문은 이것을 서버에 다시 제출하는 것에 대해 묻습니다. 가능하지만 이미지를 다운로드하려는 경우 이미지를 FileSaver.js 와 결합 하고 zip을 다운로드하려는 경우 클라이언트 측에서 생성 된 여러 이미지 파일은 jszip을 살펴 봅니다 .

Javascript에서 스크린 샷을 찍는 데 가장 좋은 솔루션은 https://grabz.it의 솔루션입니다 .

여기에는 모든 유형의 JS 응용 프로그램에서 사용할 수있는 유연하고 사용하기 쉬운 스크린 샷 API가 있습니다.

시도해 보려면 먼저 인증 앱 키 + 비밀 및 무료 SDK를 받아야합니다.

그런 다음 앱에서 구현 단계는 다음과 같습니다.

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

스크린 샷은 다른 매개 변수 로 사용자 정의 할 수 있습니다 . 예를 들면 다음과 같습니다.

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

그게 다야. 그런 다음 잠시 기다리면 페이지를 다시로드하지 않아도 페이지 하단에 이미지가 자동으로 나타납니다.

여기에서 살펴볼 수있는 스크린 샷 메커니즘에는 다른 기능이 있습니다 .

스크린 샷을 로컬로 저장할 수도 있습니다. 이를 위해서는 GrabzIt 서버 측 API를 사용해야합니다. 자세한 내용은 여기 에서 자세한 안내서를 확인 하십시오 .

서버 측에서 기꺼이 수행하려는 경우 PhantomJS 와 같은 옵션 이 있으며 더 이상 사용되지 않습니다. 가장 좋은 방법 은 Node.JS의 Puppeteer 와 같은 헤드리스 크롬입니다. Puppeteer를 사용하여 웹 페이지를 캡처하는 것은 다음과 같이 간단합니다.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

그러나 헤드리스 크롬은 서버에서 실행될 수 있어야하며, 이는 일부 종속성이 있으며 제한된 환경에 적합하지 않을 수 있습니다. 또한 Node.JS를 사용하지 않는 경우 브라우저 설치 / 실행을 직접 처리해야 할 수도 있습니다.

SaaS 서비스를 기꺼이 사용하려는 경우 다음과 같은 많은 옵션이 있습니다

• 레스트 팩
• UrlBox
• 스크린 샷 레이어

이 질문은 오래되었지만 여전히 최첨단 답변에 관심이있는 사람이있을 수 있습니다.

당신은 사용할 수 있습니다 getDisplayMedia:

https://github.com/ondras/browsershot

오늘 2020 년 4 월 현재 GitHub 라이브러리 html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K 별 | 푸른 파이프 : 성공 | 다운로드 1.3M / mo |

quote : " JavaScript HTML 렌더러이 스크립트를 사용하면 사용자 브라우저에서 직접 웹 페이지 또는 그 일부의"스크린 샷 " 을 찍을 수 있습니다 . 스크린 샷은 DOM을 기반으로하므로 실제 표현에 100 % 정확하지 않을 수 있습니다. 실제 스크린 샷은 아니지만 페이지에서 제공되는 정보를 기반으로 스크린 샷을 만듭니다.

rasterizeHTML을 사용하여 svg 및 / 또는 페이지 내용이 포함 된 이미지를 만드는 간단한 기능을 만들었습니다.

확인 해봐 :

https://github.com/orisha/tdg-screen-shooter-pure-js