כלים ללכידה ולהמרה של האינטרנט

צלם תמונות מסך עם JavaScriptממשק API של JavaScript

לוח אבחון יכול לעזור לך לבצע איתור באגים בקוד שלך!

השימוש בממשק API של GrabzIt JavaScript הוא הדרך הפשוטה ביותר להצבת תמונות מסך, DOCX או PDF, כמו גם תמונות וידאו להמרות GIF מונפשות ועוד into האתר שלך. דורש רק את ספריית JavaScript, שורה של קוד JavaScript וקצת קסם GrabzIt!

כברירת מחדל ברגע שנוצרת לכידה היא תישאר במטמון בשרתים שלנו למשך הזמן שנקבע על ידי החבילה שלך. אז אם קריאה ל- API של GrabzIt מתבצעת באמצעות אותם פרמטרים כמו צילום מסך שמור בעבר, שיוחזר במקום זאת, כדי למנוע שלא לצורך להשתמש בקצבת המסך שלך. ניתן לבטל התנהגות זו באמצעות פרמטר מטמון.

תחילת העבודה

כדי להתחיל עם ממשק ה- Javascript, בצע את הצעדים הבאים:

  1. קבל חינם שלך מפתח יישום.
  2. הורד את החינם ספריית JavaScript ולנסות את אפליקציית הדגמה.
  3. גלה את היסודות אודות אופן פעולת ה- API של GrabzIt של JavaScript על ידי קריאת הסקירה הכללית שלהלן.

כדי למנוע מאנשים אחרים להעתיק את קוד ה- JavaScript שלך ולגנוב את כל משאבי חשבון GrabzIt שלך, עליך לעשות זאת לאשר אילו תחומים יכול להשתמש במפתח היישום שלך.

הדוגמא הפשוטה ביותר

כדי להתחיל להוריד את ספריית JavaScript וכולל את grabzit.min.js הספרייה בדף האינטרנט שברצונך שהתצלום יופיע או יכלול הפניה לגירסת CDN של grabzit.min.js הספרייה כמוצג להלן. לאחר מכן כלול את הקוד שלהלן כדי להוסיף צילום מסך לתג הגוף של דף האינטרנט שלך. תצטרך להחליף את ה- APPLICATION KEY עם שלך מפתח יישום ולהחליף https://www.tesla.com עם האתר שאתה רוצה לצלם לו מסך.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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.4.8/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 נכלל ב- JavaScript שלך, זה יעבוד בדיוק כמו המפורט כאן.

התאמה אישית של צילומי המסך שלך

למרות שמפתח היישום והפרמטרים של כתובת האתר או HTML נדרשים, כל השאר פרמטרים הם אופציונליים. פרמטר מתווסף על ידי הוספת הפרמטר לערכו כמילון JSON בפורמט הבא לכל פרמטר אופציונאלי הדרוש.

לדוגמה, אם אתה רוצה שיהיה לך צילום מסך עם רוחב של 400px וגובה של 400px, בפורמט PNG ורצית לחכות 10 שניות לפני שצילום המסך תעשה את הפעולות הבאות.

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

מכיוון שלממשק API של JavaScript גישה נוחה ל- HTML של דף אינטרנט, הוא גם אידיאלי לצילום תוכן דף אינטרנט דינמי או תוכן מאחורי כניסה.

יצירת קובצי PDF ועוד

כדי ליצור סוג נוסף של לכידת כגון קובץ PDF, DOCX, CSV, JSON או Excel, פשוט ציין את הפורמט הרצוי וזה ייווצר אוטומטית. לדוגמה, בדוגמאות שלהלן אנו יוצרים מסמכי DOCX ו- PDF מתיקיות URL ו- HTML בהתאמה, אלה מורידים אוטומטית לדפדפן המשתמשים.

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

סוף סוף לעבור את כל הנדרש פרמטרים כמילון JSON ל ConvertURL or ConvertHTML שיטות. בדוגמה למטה העיכוב נקבע ל- 1000ms והפורמט ל- PNG. עם זאת אם אינך זקוק לאפשרויות נוספות נוספות אינך צריך לציין פרמטר זה כלל.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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.4.8/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 השיטה שלמטה מקבלת פונקציית התקשרות חוזרת, פונקציה זו תועבר למסד הנתונים UX של base64 של צילום המסך או הצילום לאחר שניתנה ומאפשרת ליישום JavaScript שלך שליטה רבה יותר על הלכידה.

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

כדי להתחיל, עליך לבחור אחת משלוש השיטות הבאות כדי לציין מה ברצונך להמיר.

לאחר מכן בחר אחת או יותר משיטות אלה, כדי לציין כיצד ברצונך ליצור את הלכידה.

  • UseSSL() - להכין בכוח בקשות באמצעות SSL.
  • Encrypt() - להצפין לכידת אוטומטית באמצעות מפתח מאובטח קריפטוגרפי.
  • AddPostVariable(name, value) - מגדיר פרמטר HTTP Post וערך אופציונלי, ניתן לקרוא לשיטה זו מספר פעמים כדי להוסיף פרמטרים מרובים. השימוש בשיטה זו יאלץ את GrabzIt ל לבצע הודעה HTTP.
  • AddTemplateVariable(name, value) - מגדיר א תבנית מותאמת אישית פרמטר וערך, ניתן לקרוא לשיטה זו מספר פעמים להוספת פרמטרים מרובים.
  • AddTo([element | element id]) - מכניס את הלכידה into האלמנט שצוין.
  • Create() - מכניס את הלכידה into תחילת תג הגוף, או אם זה לא קיים צומת השורש של מסמך HTML.
  • CreateInvisible() - הלכידה נוצרת אך לא מוצגת בדף האינטרנט.
  • DataURI([callback function], [decrypt]) - מחזיר את ה- URI של base64 של הלכידה בפרמטר היחיד של פונקציית ה- callback. אם פרמטר הפענוח הוא נכון הוא יפענח אוטומטית כל תצלום מוצפן.

ספריית קוד JavaScript זו היא קוד פתוח לחלוטין! אם ברצונך להציג או לשפר את קוד המקור, תוכל למצוא אותו GitHub.