قم بإنشاء لقطات شاشة مثالية لمواقع الويب باستخدام الميزات التالية لـ GrabzIt's Node.js API. ولكن قبل أن تبدأ تذكر أنه بعد استدعاء 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
يمكن لـ GrabzIt's Node.js API التقاط لقطات شاشة للصور بتنسيقات متعددة ، بما في ذلك 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":1366, "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":1366, "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":1366, "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; } });
يعد تغيير حجم الصورة أمرًا سهلاً ، ويعد القيام بذلك دون تشويه الصورة أكثر صعوبة بعض الشيء. لجعل العملية برمتها أبسط ، نوصيك باستخدام هذا آلة حاسبة البعد صورة بسيطة.
إذا كنت ترغب في زيادة عرض الصورة وارتفاعها إلى حجم أكبر من عرض المتصفح وارتفاعه ، وهو 1366 بمقدار 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 بمعرف "الميزات" ونخرجه كصورة XEGN 250px JPEG.
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; } });
المثال التالي يأخذ لقطة شاشة أخرى لـ "features" 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; } });