سؤال كيفية التقاط لقطة شاشة تحتوي على عنصر تمرير داخل صفحة ويب في Firefox؟


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

وهو جدول عمود واحد يحتوي على شريط تمرير بسبب ارتفاعه. إنه ليس IFRAME (والذي سيكون بسيطًا لتحميله في علامة التبويب الخاصة به).

يحتوي العمود على نص منسق وبعض الصور الصغيرة.

بالنسبة لصفحات الويب الطويلة التي يتم تمريرها ، من المهم القيام بهذه المهمة. ولكن كيف يمكن تحقيقه عندما يحتوي على عنصر فردي داخل الصفحة التي يتم تمريرها؟

لكي أكون واضحًا ، أحتاج إلى التقاط الصفحة بالكامل ، وليس فقط العنصر نفسه.

أرغب في تحقيق ذلك باستخدام Firefox على Windows.


67
2018-06-13 06:28


الأصل


هل سبق لك التفكير في حفظ الصفحة كملف PDF؟ إن المصيد بهذه الطريقة هو أن بعض المواقع لديها "عرض الطباعة" وهو ما سيحتويه ملف PDF ، ولكن في بعض الحالات يمكن أن تعمل هذه التقنية. - JakeGould
تضمين التغريدة ردًا علىJakeGould هل سيعمل ذلك على التمرير والعنصر داخل الصفحة؟ - RockPaperLizard
Welp ، فاتت الجزء المتعلق بعنصر التمرير. وهذا أمر بالغ الحساسية بالنسبة لي للتعليق عليه ، لذلك كل ما يمكنني قوله هو أنه لا يمكنني الوثوق الآن بأن طريقة طباعة PDF ستعمل. حظا سعيدا مع الأفكار الأخرى المعروضة هنا. - JakeGould
ربما تكون مفيدة: فايرفوكس البرنامج المساعد لحفظ الصفحة المقدمة كاملة كصورة على توصيات البرامج. - α CVn
إذا فهمت بشكل صحيح ، من المحتمل أن يكون عنصر التمرير المعني مضطرًا إلى أقل من الارتفاع الكامل. قد يساعد تعيين سمة نمط الارتفاع على الطباعة التلقائية على هذا العنصر. - tehwalris


الأجوبة:


اقتراحي هو استخدام ميزة مضمنة في فايرفوكس يتيح لك التقاط لقطات شاشة لعنصر DOM مفرد.

فقط فتح البوب ​​أدوات المطور → العثور على العنصر → انقر باليمين واتخاذ لقطة للشاشة

enter image description here

لم يعمل على أحد موقعي الداخلي لذا لا أستطيع أن أقول أنه سيعمل للجميع.

التحديث بعد تحرير OP:

إذا كنت تنوي تسجيل صفحة كاملة مع محتوى عنصر DOM بالكامل كما هو موضح أدناه ، فيجب أن تقوم بتحرير ارتفاع عنصر DOM لكن...

enter image description here

إنها ستدفع الكثير من عناصر DOM خارج إطار العرض ولقطة الشاشة أو AFAIK أي أداة أخرى لن تلتقطها ، والتي تفوق غرضك على ما أعتقد.

اقرأ أدناه من https://en.wikipedia.org/wiki/Screenshot

لقطة شاشة أو لقطة شاشة أو غطاء شاشة أو غطاء أو تفريغ شاشة أو   screengrab هي صورة تم التقاطها بواسطة شخص لتسجيل المرئية   العناصر المعروضة على الشاشة أو التلفزيون أو أي مخرج مرئي آخر   الجهاز قيد الاستخدام.

إذا كان يجب علي فعل ذلك بطريقتك ، فإني إما أن أقوم بإنشاء ملف GIF أو أن نأخذ لقطتين من اللقطات صفحة واحدة كاملة وأن يتم دمج عنصر DOM فقط في عنصر واحد.


83
2018-06-13 07:18



شكرا جزيلا على إجابتك (وصورة رائعة!) ، ولكن للأسف هذا لا يجيب على السؤال. أحتاج إلى أخذ لقطة شاشة للصفحة بأكملها بما في ذلك العنصر ، وليس فقط العنصر نفسه. - RockPaperLizard
RockPaperLizard في الواقع الإجابة @ التورية لا يجيب سؤالك ... انه فقط لم يطبق ذلك على حالة الاستخدام الخاصة بك. يمكنك متابعة إجابته ولكن حدد <body> عنصر وسيعطيك الصورة المطلوبة. - Digital Chris
إذا قمت بتحرير ارتفاع عنصر DOM حتى لا تكون هناك أشرطة تمرير داخلية ، فاستخدم FireShot لالتقاط الصفحة بأكملها ، يجب أن تعمل.
استطعت الحصول على لقطة شاشة واحدة كهذه ، ولكن ليس أكثر. فهي لا تزال تنتج صوت مصراع الكاميرا ، ولا تضع شيئًا في الحافظة. وينطبق نفس الأمر على الأمر في شريط أدوات المطور ، ولن يتم إنشاء أي ملف. - MrFox


يمكنك استخدام أمر لقطة الشاشة من شريط أدوات المطور:

  1. صحافة تحول + F2 لفتح شريط الأدوات أو تحديده من قائمة أدوات مطوري الويب.

  2. في شريط الأدوات ، اكتب الأمر screenshot --fullpage fullpage.png.

لالتقاط عنصر واحد ، يمكنك استخدام أداة اختيار css الخاصة به مع علامة - select ، على سبيل المثال.

screenshot --selector #hot-network-questions

سوف تحصل على الصورة أدناه

enter image description here


24
2018-06-13 07:54



RockPaperLizard لقد وجدت وظيفة أخرى مع نفس الإجابة و OP تم تحريره من قبلك. - pun
شكرا لك. ولكنني بحاجة إلى أخذ لقطة شاشة للصفحة بأكملها مع توسيع العنصر ، وليس فقط العنصر نفسه. - RockPaperLizard
استطعت الحصول على لقطة شاشة واحدة كهذه ، ولكن ليس أكثر. انها لا تزال تنتج صوت مصراع الكاميرا ، وليس فقط الملف. وينطبق نفس الشيء على النقر بزر الماوس الأيمن على العنصر في وضع مطور البرامج ونسخه بهذه الطريقة. لا يتم إرسال صورة إلى الحافظة. - MrFox


استخدم فايرفوكس وضع التصميم المستجيبقم بتعيين العرض إلى شيء عادي والارتفاع بحيث يكفي ليشمل الصفحة بأكملها ، انقر فوق زر screenshot (رمز الكاميرا).


8
2018-06-13 06:51





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

إنه تطبيق مدفوع ، لكن لديه تجربة متاحة أيضًا.


4
2018-06-13 07:26



إذا وجدت هذا كعلامة بالإجابة عليه ونشره في التعليق ماذا يعني ذالك؟ - A.L
@ A.L ليس لدى هذا المستخدم ما يكفي من المراجعين للتعليق ، لذا فقد قدموا إجابة على أمل أن يتم تحويلها إلى تعليق من المشرف. - MonkeyZeus
لقد استخدمت SnagIt لسنوات. انها قطعة مفيدة جدا من البرمجيات. - Roy Tinker


أنا أستعمل Screenpresso. انها تسمح لك أن تأخذ لقطة التمرير. أساسا كنت تأخذ لقطة شاشة ، انتقل لأسفل واتخاذ آخر وهلم جرا ، ثم Screenpresso غرزة لهم معا. Screenpresso هو أيضا مجاني.

FYI ، مفاتيح الاختصار للتمرير screenshot هي WindowsKey + Shift + PrintScreen. تحتاج بعد ذلك إلى النقر فوق الإطار الذي تريد التمرير إليه. عندما تصل إلى الجزء التالي من لقطة الشاشة ، انقر بزر الماوس الأيمن ، قم بالتمرير لأسفل ، انقر بزر الماوس الأيمن وهكذا. لقد انتهيت من العجلة ، ونقرت على الزر الأيسر ، وسيتم خياطتها معًا. تأكد من الحصول على بعض التداخل في كل لقطة شاشة حتى تعمل عملية التثبيت بشكل أفضل.


2
2018-06-14 00:10





هناك تمديد مسمي Nimbus لقطة الشاشة وهو مناسب تمامًا لهذه المهمة.

لديك خيار التقاط:

  • الجزء المرئي من الصفحة (من المفيد عدم تضمين عناصر المستعرض بدلاً من بديل+طباعة Scrn)
  • جزء من الصفحة (حيث يمكنك التمرير فوق المناطق على الشاشة للعثور على الجزء الذي تريده - هذه المناطق تتوافق مع عناصر HTML الأساسية الخاصة بها)
  • المنطقة المحددة (يمكنك النقر يدويًا والسحب في المكان الذي تريد فيه لقطة الشاشة ، وتدعم التمرير أثناء السحب)
  • الصفحة بأكملها

nimbus


1
2018-06-14 12:05



شكرا لإجابتك ، وأنا أقدر ذلك. للأسف ، لا يبدو أن Nimbus Screen Capture يمكنه التقاط المحتويات الكاملة للتمرير جزء داخل صفحة. إذا كنت مخطئًا ، هل يمكنك تقديم مزيد من التفاصيل حول كيفية تحقيق ذلك باستخدام هذه الأداة؟ - RockPaperLizard
RockPaperLizard أنت على حق ، لا يبدو أن دعم هذا - كنت أعتقد أن وضع جزء يغطي عناصر التمرير ، أو أن وضع المنطقة المحددة ستعمل ولكن ، في حين أن النافذة يمكن تمريرها في هذا الوضع ، يبدو أن عناصر التمرير لا يمكن. - Keith Hall
شكرا لتأكيد أنني فقط لم أر ذلك. ربما سيضيفون هذه الوظيفة إلى إصدار مستقبلي. - RockPaperLizard


خيارات تناسب كل شيء في صفحة واحدة:

  • استعمال <Ctrl>- لتناسب كل شيء في صفحة واحدة
  • تدوير الشاشة إلى الوضع الرأسي
  • استخدم شاشة ثانية في الوضع الرأسي وحدد موقعه أسفل الشاشة الأولى
  • الجمع بين كل ما سبق

هناك خيار آخر يتمثل في التقاط لقطة شاشة للجزء العلوي مما تريد التقاطه. مرر لأسفل ، التقط صورة الشاشة التالية. كرر هذا حتى تلتقط كل شيء.
اختياريًا: دمج لقطات الشاشة في صورة واحدة كبيرة باستخدام محرر صور (على سبيل المثال ، gimp).


0
2018-06-13 06:42



حتى وصلت إلى البند 4 ، اعتقدت أنك كنت فقط مما يوحي بأن تجمع كل العناصر! كنت أتخيل وجود 20 شاشة وتكديسها واحدة فوق الأخرى ... LOL. ثم وصلت إلى رقم 4 ، وتعلمت أنك تعني العناصر التي سيتم استخدامها بشكل فردي أو مشترك. - RockPaperLizard
ولكن إذا قمت بتصغير الصفحة ، فلا توجد طريقة لتغيير حجمها دون أي تشويه. - NiCk Newman