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

لقطة شاشة JavaScript مجانية من GrabzIt وواجهة برمجة تطبيقات تحويل HTML

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

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

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

كيف تبدأ

اتبع هذه الخطوات لبدء استخدام JavaScript API:

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

لمنع الآخرين من نسخ كود 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 بدلاً من ذلك، يمكنك استخدام هذا تقنية. بخلاف كيفية تضمين 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>

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

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>

طرق GrabzIt

اختر إحدى الطرق الثلاث التالية للإشارة إلى ما تريد تحويله.

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

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