يعد استخدام GrabzIt JavaScript Screenshot API أبسط طريقة لوضع لقطات شاشة للصور أو DOCX أو PDF. إلى جانب فيديو لتحويلات GIF المتحركة و اكثر intيا موقع الويب الخاص بك. تتطلب فقط مكتبة جافا سكريبت GrabzIt، سطر من شفرة جافا سكريبت وبعض السحر GrabzIt!
ستقوم خوادمنا بالتخزين المؤقت للوقت الذي تحدده الحزمة الخاصة بك. إذا قمت بإجراء مكالمة إلى GrabzIt's JavaScript API باستخدام نفس المعلمات مثل لقطة الشاشة المخزنة مؤقتًا مسبقًا. سيقوم النظام بإرجاع لقطة الشاشة المخزنة مؤقتًا بدلاً من ذلك لمنع استخدام بدل الالتقاط الخاص بك. يمكنك تعطيل هذا السلوك باستخدام معلمة ذاكرة التخزين المؤقت.
اتبع هذه الخطوات لبدء استخدام JavaScript API:
لمنع الآخرين من نسخ كود 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@/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 بدلاً من ذلك، يمكنك استخدام هذا تقنية. بخلاف كيفية تضمين JavaScript في موقع الويب الخاص بك، فإنه سيعمل تمامًا بنفس الطريقة الموضحة هنا.
تحتاج دائمًا إلى مفتاح التطبيق وعنوان URL أو معلمات HTML، ولكن كل ما عدا ذلك المعلمات هي اختيارية. لاستخدام المعلمات الاختيارية، قم بإضافة المعلمة وقيمتها كعنصر قاموس JSON.
على سبيل المثال، لالتقاط لقطة شاشة PNG بعرض 400 بكسل وارتفاع 400 بكسل والانتظار لمدة 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 API الوصول إلى 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 داخل صفحة الويب لإضافة الصورة أو التقاط ملف PDF إليها. في المثال أدناه، سيضيف الكود لقطة الشاشة إلى ملف insertCode
شعبة.
أخيرا تمرير أي المطلوبة المعلمات كما قاموس JSON ل ConvertURL
or ConvertHTML
طُرق. في المثال أدناه، قمنا بتعيين التأخير على 1000 مللي ثانية والتنسيق على 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>
• DataURI
الطريقة أدناه تقبل وظيفة رد الاتصال. ستتلقى هذه الوظيفة عنوان URL للبيانات base64 الخاص بلقطة الشاشة أو اللقطة المعروضة. السماح لتطبيق 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>
اختر إحدى الطرق الثلاث التالية للإشارة إلى ما تريد تحويله.
ثم اختر واحدة أو أكثر من هذه الطرق لتحديد الطريقة التي تريد بها إنشاء الالتقاط.
مكتبة أكواد JavaScript هذه مفتوحة المصدر تمامًا! لعرض الكود المصدري أو تحسينه، يمكنك العثور عليه GitHub جيثب:.