ถ่ายภาพหน้าจอของหน้าเว็บด้วย JavaScript หรือไม่

เป็นไปได้ไหมที่จะจับภาพหน้าจอของหน้าเว็บด้วย JavaScript แล้วส่งกลับไปที่เซิร์ฟเวอร์หรือไม่?

ฉันไม่ได้เกี่ยวข้องกับปัญหาความปลอดภัยของเบราว์เซอร์ ฯลฯ รวมการดำเนินการจะเป็นสำหรับHTA แต่มันเป็นไปได้?

ฉันทำสิ่งนี้สำหรับ HTA โดยใช้ตัวควบคุม ActiveX มันค่อนข้างง่ายที่จะสร้างส่วนควบคุมใน VB6 เพื่อจับภาพหน้าจอ ฉันต้องใช้การเรียก API keybd_event เพราะ SendKeys ไม่สามารถทำ PrintScreen ได้ นี่คือรหัสสำหรับ:

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 เข้ากับโครงการในอนาคต

ตำของถ้าเป็นไปได้ที่จะทำโดยการตั้งค่าองค์ประกอบของร่างกายทั้งหมดลงใน 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เป็นโอเพ่นซอร์สวัตถุActiveXที่ช่วยให้จับภาพและบันทึกภาพหน้าจอของ Internet Explorer เมื่อลงทะเบียนไฟล์ DLL บนไคลเอนต์แล้วคุณควรจะสามารถจับภาพหน้าจอและอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์โดยใช้ JavaScript ข้อเสีย: ต้องลงทะเบียนไฟล์ DLL ที่ลูกค้าและทำงานกับ Internet Explorer เท่านั้น

เรามีข้อกำหนดที่คล้ายกันสำหรับการรายงานข้อบกพร่อง เนื่องจากเป็นสถานการณ์ของอินทราเน็ตเราจึงสามารถใช้เบราว์เซอร์แอดออน (เช่นFireshotสำหรับ Firefox และIE สกรีนช็อตสำหรับ Internet Explorer)

SnapEngageใช้แอปเพล็ Java (1.5 +) เพื่อให้ภาพหน้าจอเบราว์เซอร์ AFAIK java.awt.Robotควรทำงาน - ผู้ใช้มีเพียงเพื่ออนุญาตให้แอปเพล็ตทำงาน (ครั้งเดียว)

และฉันเพิ่งพบโพสต์เกี่ยวกับมัน:

• Stack JavaScriptล้นคำถามJavaScript เพื่อจับภาพหน้าจอของเว็บไซต์โดยไม่ต้องใช้ ActiveX
• โพสต์บล็อกวิธีการทำงานของ SnapABug - และสิ่งที่ควรทำ

คุณสามารถบรรลุว่าการใช้ HTA และVBScript เพียงเรียกเครื่องมือภายนอกเพื่อทำการจับภาพหน้าจอ ฉันลืมชื่อนี้ แต่ใน Windows Vista มีเครื่องมือทำภาพหน้าจอ คุณไม่จำเป็นต้องติดตั้งเพิ่มเติมสำหรับมันด้วยซ้ำ

สำหรับอัตโนมัติ - ทั้งหมดขึ้นอยู่กับเครื่องมือที่คุณใช้ หากมี API ฉันมั่นใจว่าคุณสามารถเรียกภาพหน้าจอและกระบวนการบันทึกผ่านการโทร Visual Basic สองครั้งโดยที่ผู้ใช้ไม่ทราบว่าคุณทำสิ่งที่คุณทำ

ตั้งแต่ที่คุณพูดถึง HTA ฉันกำลังสมมติว่าคุณอยู่บน Windows และ (อาจ) รู้สภาพแวดล้อมของคุณ (เช่นระบบปฏิบัติการและเวอร์ชั่น) ได้เป็นอย่างดี

ฉันพบว่าdom-to-imageทำได้ดีมาก (ดีกว่า html2canvas) ดูคำถามและคำตอบต่อไปนี้: https://stackoverflow.com/a/32776834/207981

คำถามนี้ถามเกี่ยวกับการส่งกลับไปที่เซิร์ฟเวอร์ซึ่งควรจะเป็นไปได้ แต่หากคุณต้องการดาวน์โหลดภาพคุณจะต้องรวมกับFileSaver.jsและหากคุณต้องการดาวน์โหลด zip ด้วย ภาพหลายไฟล์ทั้งหมดที่สร้างขึ้นฝั่งไคลเอ็นต์จะดูที่jszip

วิธีการแก้ปัญหาที่ดีสำหรับการถ่ายภาพหน้าจอใน Javascript เป็นหนึ่งโดยhttps://grabz.it

พวกเขามีสกรีนช็อต API ที่ยืดหยุ่นและใช้งานง่ายซึ่งสามารถใช้งานได้โดยแอปพลิเคชัน JS ทุกประเภท

หากคุณต้องการลองตอนแรกคุณควรได้รับรหัสแอป + ลับและ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>

นั่นคือทั้งหมดที่ จากนั้นรอสักครู่และภาพจะปรากฏขึ้นที่ด้านล่างของหน้าโดยอัตโนมัติโดยไม่จำเป็นต้องโหลดหน้าซ้ำ

มีฟังก์ชันอื่น ๆ กลไกภาพหน้าจอที่คุณสามารถสำรวจที่นี่

นอกจากนี้ยังเป็นไปได้ที่จะบันทึกภาพหน้าจอในเครื่อง เพื่อที่คุณจะต้องใช้ API ฝั่งเซิร์ฟเวอร์ GrabzIt สำหรับข้อมูลเพิ่มเติมโปรดดูคู่มือรายละเอียดที่นี่

หากคุณยินดีที่จะทำในฝั่งเซิร์ฟเวอร์มีตัวเลือกเช่นPhantomJSซึ่งตอนนี้เลิกใช้แล้ว วิธีที่ดีที่สุดที่จะไปคือ Headless Chrome ที่มีPuppeteerบน 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 มีตัวเลือกมากมายเช่น

• Restpack
• UrlBox
• เลเยอร์หน้าจอ

คำถามนี้เก่า แต่อาจมีบางคนที่สนใจคำตอบที่ล้ำสมัย:

คุณสามารถใช้getDisplayMedia:

https://github.com/ondras/browsershot

ณ วันนี้ เม.ย. 2020 ห้องสมุด GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K ดาว | ท่อสีฟ้า: สำเร็จ | ดาวน์โหลด 1.3M / mo |

อ้างถึง: " JavaScript HTML renderer สคริปต์อนุญาตให้คุณใช้" ภาพหน้าจอ "ของหน้าเว็บหรือบางส่วนของมันโดยตรงบนเบราว์เซอร์ผู้ใช้ภาพหน้าจอเป็นไปตาม DOM และอาจไม่แม่นยำ 100% แทนจริง ไม่ได้ทำภาพหน้าจอจริง แต่สร้างภาพหน้าจอตามข้อมูลที่มีอยู่ในหน้า

ฉันสร้างฟังก์ชันอย่างง่ายที่ใช้ rasterizeHTML เพื่อสร้าง svg และ / หรือรูปภาพที่มีเนื้อหาของหน้า

ลองดูสิ:

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