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

צלם תמונות מסך של אתר או המרת HTML לתמונותממשק ה- API של Node.js

צור צילומי מסך מושלמים של אתרי אינטרנט באמצעות התכונות הבאות של ממשק ה- API של GrabzIt Node.js. עם זאת לפני שתתחיל לזכור את זה לאחר התקשרות אל url_to_image, html_to_image or file_to_image שיטות save or save_to יש לקרוא לשיטה לצילום המסך.

אפשרויות בסיסיות

רק פרמטר אחד נדרש כדי לצלם צילום מסך של דף אינטרנט או להמיר HTML intתמונה כפי שמוצג בדוגמה הבאה.

client.url_to_image("https://www.tesla.com");
//Then call the save or save_to method
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>");
//Then call the save or save_to method
client.file_to_image("example.html");
//Then call the save or save_to method

פורמטים של תמונת מסך

ממשק ה- API של Node.js של GrabzIt יכול לצלם תמונות מסך בכמה פורמטים, כולל JPG, PNG, WEBP, BMP (8 bit, 16 bit, 24 bit או 32 bit) ו- TIFF. פורמט ברירת המחדל של צילומי מסך של תמונות הוא JPG. עם זאת איכות התמונה של JPG עשויה להיות לא מספיק טובה עבור יישומים מסוימים בנסיבות אלה, פורמט PNG מומלץ לצילומי מסך של תמונות מכיוון שהוא נותן איזון טוב בין איכות לגודל הקובץ. הדוגמה הבאה מציגה צילום מסך שצולם בפורמט PNG.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

גודל הדפדפן

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

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

שנה את גודל התמונה

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

אם ברצונך להגדיל את רוחב וגובה התמונה לגודל גדול יותר מרוחב וגובה הדפדפן, אשר כברירת מחדל הוא 1024 על ידי 728 פיקסלים, יש להגדיל את רוחב הגובה של הדפדפן כך שיתאים.

מזהה מותאם אישית

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

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.url_to_image("https://www.tesla.com", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.file_to_image("example.html", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});

צילום מסך באורך מלא

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

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

אתה יכול גם להחזיר תמונות ממוזערות שאינן קצוצות, אך היזהר מכיוון שיכול ליצור תמונות גדולות. לשם כך העבירו -1 ל- height ו / או width נכסים, מאפיינים. הממד שמועבר -1 לא ייחתך.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
שים לב שאין רוחב דפדפן באורך מלא!

השימוש בערכים המיוחדים הללו פירושו שתוכלו ליצור צילום מסך המהווה גרסה בקנה מידה מלא של כל דף האינטרנט אם תרצו!

צלם תמונת מסך של אלמנט עמוד

GrabzIt מאפשר לך לצלם צילום מסך של אלמנט HTML, כגון div or span לתייג ולתפוס את כל תוכנו. לשם כך יש לציין את אלמנט ה- HTML שברצונך למסך למסך בורר CSS.

...
<div id="features">
	<img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3>
</div>
...

עבור הדוגמה למטה אנו נבחר את ה- div עם המזהה "features" ונציג אותו כתמונת JPEG 250 x 250px.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

// The 250 parameters indicates that image should be sized to 250 x 250 px
var options = {"width":250, "height":250, "format":"jpg","target":"#features"};

client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

הדוגמה הבאה מצולמת צילום מסך נוסף של ה- div "תכונות" אך הפעם מוציא תמונת JPEG בגודל המדויק של ה- div.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

// The minus ones indicates that image should not be cropped
var options = {"browserHeight":-1, "width":-1, "height":-1, "format":"jpg", "target":"#features"};

client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});