هل تريد التقاط لقطة شاشة لصفحة ويب باستخدام JavaScript؟

Question

هل من الممكن التقاط لقطة شاشة لصفحة ويب باستخدام JavaScript ثم إرسالها مرة أخرى إلى الخادم؟

أنا لست مهتمًا جدًا بقضايا أمان المتصفح.إلخ.كما سيكون التنفيذ ل HTA.ولكن هل هذا ممكن؟

Answer 1

لقد قمت بذلك لـ HTA باستخدام عنصر تحكم ActiveX.كان من السهل جدًا إنشاء عنصر التحكم في VB6 لالتقاط لقطة الشاشة.اضطررت إلى استخدام استدعاء keybd_event API لأن 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 إلى الخادم، ثم إنشاء لقطات الشاشة من جانب الخادم.

Answer 2

تقوم Google بذلك في Google+ وقام أحد المطورين الموهوبين بتصميمه وإنتاجه بشكل عكسي http://html2canvas.hertzen.com/ .للعمل في IE ستحتاج إلى مكتبة دعم قماشية مثل http://excanvas.sourceforge.net/

Answer 3

الحل المحتمل الآخر الذي اكتشفته هو http://www.phantomjs.org/ والذي يسمح للمرء بالتقاط لقطات شاشة للصفحات بسهولة وغير ذلك الكثير.على الرغم من أن متطلباتي الأصلية لهذا السؤال لم تعد صالحة بعد الآن (وظيفة مختلفة)، فمن المحتمل أن أقوم بدمج PhantomJS في المشاريع المستقبلية.

Answer 4

باوندر إذا كان من الممكن القيام بذلك عن طريق وضع عناصر الجسم بالكامل في لوحة قماشية ثم استخدام Canvas2image ؟

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

Answer 5

هناك طريقة ممكنة للقيام بذلك، إذا كنت تعمل على نظام التشغيل 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");

ثم لديك لقطة الشاشة في جانب الخادم.

Answer 6

قد لا يكون هذا هو الحل المثالي بالنسبة لك، ولكن قد لا يزال من الجدير بالذكر.

سنابسي هو مصدر مفتوح، اكتف اكس كائن يمكّن من التقاط لقطات شاشة Internet Explorer وحفظها. بمجرد تسجيل ملف DLL على العميل، يجب أن تكون قادرًا على التقاط لقطة الشاشة وتحميل الملف إلى الخادم باستخدام JavaScript.العيوب:فهو يحتاج إلى تسجيل ملف DLL لدى العميل ويعمل فقط مع Internet Explorer.

Answer 7

كان لدينا متطلبات مماثلة للإبلاغ عن الأخطاء.نظرًا لأنه كان مخصصًا لسيناريو إنترانت، فقد تمكنا من استخدام الوظائف الإضافية للمتصفح (مثل اطلق رصاصة لمتصفح فايرفوكس و لقطة شاشة آي إي لمتصفح Internet Explorer).

Answer 8

ال SnapEngage يستخدم أ برنامج جافا (1.5+) لعمل لقطة شاشة للمتصفح.بقدر ما أعلم، java.awt.Robot يجب أن يقوم بالمهمة - يجب على المستخدم فقط السماح للتطبيق الصغير بالقيام بذلك (مرة واحدة).

ولقد وجدت للتو مشاركة حول هذا الموضوع:

• سؤال تجاوز سعة المكدس كود JavaScript لالتقاط لقطة شاشة لموقع ويب دون استخدام ActiveX
• مشاركة مدونة كيف يعمل SnapABug – وما ينبغي عليهم فعله

Answer 9

يمكنك تحقيق ذلك باستخدام HTA و فبسكريبت.ما عليك سوى استدعاء أداة خارجية للقيام بالتقاط لقطة الشاشة.لقد نسيت الاسم، ولكن في نظام التشغيل Windows Vista هناك أداة لالتقاط لقطات الشاشة.لا تحتاج حتى إلى تثبيت إضافي لذلك.

أما بالنسبة للوظيفة التلقائية، فالأمر يعتمد كليًا على الأداة التي تستخدمها.إذا كان يحتوي على واجهة برمجة التطبيقات (API)، فأنا متأكد من أنه يمكنك تشغيل لقطة الشاشة وحفظها من خلال عدة استدعاءات لـ Visual Basic دون أن يعلم المستخدم أنك فعلت ما فعلته.

منذ أن ذكرت HTA، أفترض أنك تستخدم نظام التشغيل Windows و(على الأرجح) تعرف بيئتك (على سبيل المثال.نظام التشغيل والإصدار) بشكل جيد للغاية.

Answer 10

الحل الرائع لالتقاط لقطة الشاشة في Javascript هو الحل https://grabz.it.

لديهم واجهة برمجة تطبيقات لقطة شاشة مرنة وسهلة الاستخدام والتي يمكن استخدامها بواسطة أي نوع من تطبيقات 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>

هذا كل شئ.ثم انتظر لفترة قصيرة وستظهر الصورة تلقائيًا في أسفل الصفحة، دون الحاجة إلى إعادة تحميل الصفحة.

هناك وظائف أخرى لآلية لقطة الشاشة التي يمكنك استكشافها هنا.

من الممكن أيضًا حفظ لقطة الشاشة محليًا.لذلك سوف تحتاج إلى استخدام واجهة برمجة تطبيقات جانب خادم GrabzIt.لمزيد من المعلومات راجع الدليل التفصيلي هنا.

Answer 11

لقد وجدت ذلك dom-to-image لقد قام بعمل جيد (أفضل بكثير من html2canvas).راجع السؤال والجواب التالي: https://stackoverflow.com/a/32776834/207981

يسأل هذا السؤال عن إرسال هذا مرة أخرى إلى الخادم، وهو أمر ممكن، ولكن إذا كنت تتطلع إلى تنزيل الصورة (الصور)، فستحتاج إلى دمجها معها FileSaver.js, ، وإذا كنت تريد تنزيل ملف مضغوط يحتوي على ملفات صور متعددة، فقم بإلقاء نظرة على جميع ملفات الصور التي تم إنشاؤها من جانب العميل com.jszip.

Answer 12

إذا كنت على استعداد للقيام بذلك على جانب الخادم، فهناك خيارات مثل فانتوم جي إس, ، والذي تم إهماله الآن.أفضل طريقة للذهاب هي استخدام 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();
})();

ومع ذلك، فإنه يتطلب استخدام Chrome بدون رأس حتى يتمكن من العمل على خوادمك، والذي يحتوي على بعض التبعيات وقد لا يكون مناسبًا للبيئات المقيدة.(أيضًا، إذا كنت لا تستخدم Node.JS، فقد تحتاج إلى التعامل مع تثبيت/تشغيل المتصفحات بنفسك.)

إذا كنت على استعداد لاستخدام خدمة SaaS، فهناك العديد من الخيارات مثل

• حقيبة الراحة
• UrlBox
• طبقة لقطة الشاشة