أدوات لالتقاط وتحويل الويب

خذ لقطات من موقع الويب باستخدام JavaScriptواجهة برمجة تطبيقات جافا سكريبت

الـ لوحة التشخيص يمكن أن تساعدك على تصحيح التعليمات البرمجية الخاصة بك!

يعد استخدام GrabzIt JavaScript API هو أبسط طريقة لوضع لقطات شاشة أو صورة DOCX أو PDF فيديو لتحويلات GIF المتحركة و اكثر intيا موقع الويب الخاص بك. تتطلب فقط مكتبة جافا سكريبت GrabzIt، سطر من شفرة جافا سكريبت وبعض السحر GrabzIt!

افتراضيًا بمجرد إنشاء الالتقاط ، سيبقى مؤقتًا على خوادمنا للوقت المحدد بواسطة الحزمة الخاصة بك. ثم إذا تم إجراء مكالمة إلى JavaScript API لـ GrabzIt باستخدام نفس المعلمات مثل لقطة شاشة تم تخزينها مؤقتًا مسبقًا والتي سيتم إرجاعها بدلاً من ذلك ، لمنع استخدام قطة لقطة الشاشة بشكل غير ضروري. يمكن تعطيل هذا السلوك باستخدام معلمة ذاكرة التخزين المؤقت.

ابدء

للبدء في استخدام Javascript API ، اتبع الخطوات التالية:

  1. احصل مجانا مفتاح التطبيق.
  2. تحميل مجانا مكتبة جافا سكريبت ومحاولة الخروج من التطبيق التجريبي.
  3. تعرف على أساسيات كيفية عمل واجهة برمجة تطبيقات JavaScript من GrabzIt من خلال قراءة النظرة العامة أدناه.

لمنع الآخرين من مجرد نسخ شفرة JavaScript الخاصة بك وسرقة جميع موارد حساب GrabzIt ، يجب عليك إذن ما المجالات يمكن استخدام مفتاح التطبيق الخاص بك.

أبسط مثال

لتبدأ تنزيل مكتبة جافا سكريبت GrabzIt وتشمل grabzit.min.js مكتبة في صفحة الويب التي تريد أن يظهر الالتقاط أو تتضمن مرجعًا إلى إصدار CDN الخاص بـ grabzit.min.js مكتبة كما هو مبين أدناه. ثم قم بتضمين الكود أدناه لإضافة لقطة للشاشة الرئيسية لصفحة الويب الخاصة بك. سوف تحتاج إلى استبدال APPLICATION KEY مع الخاص مفتاح التطبيق واستبدال https://www.tesla.com مع الموقع الذي تريد أن تأخذ لقطة من.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

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

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

تخصيص لقطات الخاص بك

على الرغم من أن مفتاح التطبيق وعنوان URL أو معلمات HTML مطلوبان ، فكل شيء آخر المعلمات اختيارية. تتم إضافة المعلمة عن طريق إلحاق المعلمة بقيمتها باعتبارها قاموس JSON بالتنسيق التالي لكل معلمة اختيارية تحتاجها.

على سبيل المثال ، إذا كنت ترغب في الحصول على لقطة شاشة بعرض 400px وارتفاع 400px ، بتنسيق PNG وأردت الانتظار لمدة 10 ثانية قبل التقاط لقطة الشاشة ، فستقوم بما يلي.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

نظرًا لأن واجهة برمجة تطبيقات JavaScript سهلة الوصول إلى HTML لصفحة ويب ، فهي أيضًا مثالية لالتقاط الصور محتوى صفحة الويب الديناميكية أو المحتوى وراء تسجيل الدخول.

إنشاء قوات الدفاع الشعبي وأكثر من ذلك

لإنشاء نوع آخر من الالتقاط مثل PDF أو DOCX أو CSV أو JSON أو Excel Spreadsheet ، حدد التنسيق المطلوب فقط وسيتم إنشاؤه تلقائيًا. على سبيل المثال ، في الأمثلة أدناه ، نقوم بإنشاء مستندات DOCX و PDF من URL و HTML على التوالي ، ثم يتم تنزيلها تلقائيًا إلى متصفح المستخدمين.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

من المهم أن نتذكر أن هذا تحميل المعلمة يمكن استخدامه لتنزيل أي نوع من الالتقاط تلقائيًا ، مثل DOCX أو PDF أو PNG أو JPG أو CSV.

مضيفا لقطات للعناصر

الـ AddTo تقبل الطريقة أدناه معرف عنصر أو عنصر DOM كموقع داخل مستند HTML لإضافة الصورة أو التقاط PDF إليها. في المثال التالي ، ستتم إضافة لقطة الشاشة إلى insertCode شعبة.

أخيرا تمرير أي المطلوبة المعلمات كما قاموس JSON ل ConvertURL or ConvertHTML طرق. في المثال أدناه ، تم تعيين التأخير إلى 1000ms والتنسيق إلى PNG. ومع ذلك ، إذا كنت لا تحتاج إلى أي خيارات إضافية أخرى ، فلن تحتاج إلى تحديد هذه المعلمة على الإطلاق.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

تحويل يلتقط إلى URI البيانات

الـ DataURI الطريقة أدناه تقبل وظيفة رد الاتصال ، سيتم تمرير هذه الوظيفة بعد ذلك إلى URI base64 data من لقطة الشاشة أو التقاطها بمجرد تقديمها مما يتيح تطبيق JavaScript الخاص بك مزيدًا من التحكم في الالتقاط.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

طرق GrabzIt

للبدء ، يجب عليك اختيار إحدى الطرق الثلاثة التالية للإشارة إلى ما تريد تحويله.

  • ConvertURL([url to capture], [options]) - يحول عنوان URL ، افتراضيًا لقطة شاشة JPG. القاموس JSON يحتوي على المعلمات هو اختياري.
  • ConvertHTML([html to convert], [options]) - يحول HTML، بشكل افتراضي intيا صورة JPG. القاموس JSON يحتوي على المعلمات هو اختياري.
  • ConvertPage([options]) - يلتقط صفحة المستخدم الحالية، بشكل افتراضي intيا صورة JPG. القاموس JSON يحتوي على المعلمات هو اختياري.

ثم اختر طريقة أو أكثر من هذه الطرق ، لتحديد كيفية إنشاء الالتقاط.

  • UseSSL() - صنع بالقوة طلبات باستخدام SSL.
  • Encrypt() - تشفير الالتقاط تلقائيًا باستخدام مفتاح آمن مشفر.
  • AddPostVariable(name, value) - يحدد معلمة HTTP Post والقيمة الاختيارية ، يمكن استدعاء هذه الطريقة عدة مرات لإضافة معلمات متعددة. باستخدام هذه الطريقة سوف يجبر GrabzIt ل أداء وظيفة HTTP.
  • AddTemplateVariable(name, value) - يعرف أ قالب مخصص المعلمة والقيمة ، يمكن استدعاء هذه الطريقة عدة مرات لإضافة معلمات متعددة.
  • AddTo([element | element id]) - يدرج التقاط intالعنصر المحدد.
  • Create() - يدرج الالتقاط into بداية علامة النص ، أو إذا لم يكن ذلك يمثل عقدة الجذر لمستند HTML.
  • CreateInvisible() - يتم إنشاء الالتقاط ولكن لا يتم عرضه على صفحة الويب.
  • DataURI([callback function], [decrypt]) - إرجاع بيانات base64 URI للالتقاط في المعلمة الفردية لوظيفة رد الاتصال. إذا كانت المعلمة decrypt true ، فستقوم تلقائيًا بفك تشفير أي التقاطات المشفرة.

مكتبة شفرة جافا سكريبت هذه مفتوحة المصدر تماما! إذا كنت ترغب في عرض أو تحسين شفرة المصدر ، يمكنك العثور عليها جيثب.