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

خذ لقطات من موقع الويب باستخدام JavaScript

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

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

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

كيف تبدأ

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

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

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

  • نظرًا لعدم وجود مجالات مصرح بها حاليًا ، فلن تعمل واجهة برمجة تطبيقات JavaScript هذه من أجلك! لو سمحت أضف المجال الخاص بك!

أبسط مثال

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

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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 بالتنسيق التالي لكل معلمة اختيارية تحتاجها.

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

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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@/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@/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@/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@/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@/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@/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@/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@/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

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

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

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