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

التقاط لقطات من موقع الويب أو تحويل HTML إلى صور

Node.js API

قم بإنشاء لقطات شاشة مثالية لمواقع الويب باستخدام الميزات التالية لـ 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;
    }
});