JavaScript로 웹페이지의 스크린샷을 찍으시겠습니까?

StackOverflow https://stackoverflow.com/questions/60455

  •  09-06-2019
  •  | 
  •  

문제

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 노드를 서버로 보낸 다음 서버측에서 스크린샷을 만드는 것입니다.

다른 팁

구글이 구글+에서 이런 일을 하고 있는데, 재능있는 개발자가 이를 리버스엔지니어링해서 제작했습니다. http://html2canvas.hertzen.com/ .IE에서 작업하려면 다음과 같은 캔버스 지원 라이브러리가 필요합니다. http://excanvas.sourceforge.net/

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

Pounder's는 전신 요소를 캔버스로 설정한 다음 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");

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

이는 귀하에게 이상적인 솔루션은 아닐 수도 있지만 여전히 언급할 가치가 있을 수 있습니다.

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

버그 보고에 대해서도 비슷한 요구 사항이 있었습니다.인트라넷 시나리오였기 때문에 브라우저 애드온(예: 사격 파이어폭스와 IE 스크린샷 Internet Explorer의 경우).

그만큼 SnapEngage 사용하다 자바 애플릿 (1.5+) 브라우저 스크린샷을 만듭니다.AFAIK, java.awt.Robot 작업을 수행해야 합니다. 사용자는 애플릿이 해당 작업을 수행하도록 허용하기만 하면 됩니다(한 번).

그리고 방금 이에 대한 게시물을 찾았습니다.

HTA를 사용하여 이를 달성할 수 있으며 VB스크립트.스크린샷을 찍으려면 외부 도구를 호출하면 됩니다.이름이 무엇인지 잊어버렸는데 Windows Vista에는 스크린샷을 찍는 도구가 있습니다.추가 설치도 필요하지 않습니다.

자동의 경우 사용하는 도구에 따라 완전히 달라집니다.API가 있는 경우 사용자가 수행한 작업을 알지 못한 채 몇 번의 Visual Basic 호출을 통해 스크린샷과 저장 프로세스를 실행할 수 있다고 확신합니다.

HTA를 언급하셨으므로 귀하가 Windows를 사용하고 있고 (아마도) 환경(예:OS 및 버전) 매우 좋습니다.

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를 활용해야 합니다.자세한 내용은 상세 가이드를 확인하세요. 여기.

나는 그것을 발견했다 돔-이미지 좋은 일을 했습니다(html2canvas보다 훨씬 낫습니다).다음 질문과 답변을 참조하세요. https://stackoverflow.com/a/32776834/207981

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

서버 측에서 기꺼이 수행하려는 경우 다음과 같은 옵션이 있습니다. PhantomJS, 이제 더 이상 사용되지 않습니다.가장 좋은 방법은 다음과 같은 기능을 갖춘 Headless Chrome입니다. 인형사 Node.JS에서.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 서비스를 사용하려는 경우 다음과 같은 다양한 옵션이 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top