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

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

---

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;
}

And then via PHP you can do:

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

Then you have the screenshot in the server side.

---

This might not be the ideal solution for you, but it might still be worth mentioning.

Snapsie is an open source, ActiveX object that enables Internet Explorer screenshots to be captured and saved. Once the DLL file is registered on the client, you should be able to capture the screenshot and upload the file to the server withing JavaScript. Drawbacks: it needs to register the DLL file at the client and works only with Internet Explorer.

---

We had a similar requirement for reporting bugs. Since it was for an intranet scenario, we were able to use browser addons (like Fireshot for Firefox and IE Screenshot for Internet Explorer).

---

The SnapEngage uses a Java applet (1.5+) to make a browser screenshot. AFAIK, java.awt.Robot should do the job - the user has just to permit the applet to do it (once).

And I have just found a post about it:

• Stack Overflow question JavaScript code to take a screenshot of a website without using ActiveX
• Blog post How SnapABug works – and what they should do

---

You can achieve that using HTA and VBScript. Just call an external tool to do the screenshotting. I forgot what the name is, but on Windows Vista there is a tool to do screenshots. You don't even need an extra install for it.

As for as automatic - it totally depends on the tool you use. If it has an API, I am sure you can trigger the screenshot and saving process through a couple of Visual Basic calls without the user knowing that you did what you did.

Since you mentioned HTA, I am assuming you are on Windows and (probably) know your environment (e.g. OS and version) very well.

---

I found that dom-to-image did a good job (much better than html2canvas). See the following question & answer: https://stackoverflow.com/a/32776834/207981

This question asks about submitting this back to the server, which should be possible, but if you're looking to download the image(s) you'll want to combine it with FileSaver.js, and if you want to download a zip with multiple image files all generated client-side take a look at jszip.

---

A great solution for screenshot taking in Javascript is the one by https://grabz.it.

They have a flexible and simple-to-use screenshot API which can be used by any type of JS application.

If you want to try it, at first you should get the authorization app key + secret and the free SDK

Then, in your app, the implementation steps would be:

// 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>

Screenshot could be customized with different parameters. For example:

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

That's all. Then simply wait a short while and the image will automatically appear at the bottom of the page, without you needing to reload the page.

There are other functionalities to the screenshot mechanism which you can explore here.

It's also possible to save the screenshot locally. For that you will need to utilize GrabzIt server side API. For more info check the detailed guide here.

---

If you are willing to do it on the server side, there are options like PhantomJS, which is now deprecated. The best way to go would be Headless Chrome with something like Puppeteer on Node.JS. Capturing a web page using Puppeteer would be as simple as follows:

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();
})();

However it requires headless chrome to be able to run on your servers, which has some dependencies and might not be suitable on restricted environments. (Also, if you are not using Node.JS, you might need to handle installation / launching of browsers yourself.)

If you are willing to use a SaaS service, there are many options such as

• Restpack
• UrlBox
• Screenshot Layer

참고URL : https://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript