次の機能を使用して、ウェブサイトの完璧な画像のスクリーンショットを作成します GrabzItのNode.js API。 ただし、開始する前に、 url_to_image, html_to_image or file_to_image メソッド save or save_to スクリーンショットを撮るには、メソッドを呼び出す必要があります。
Webページのスクリーンショットを撮るには1つのパラメーターが必要です 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のNode.js APIは、JPG、PNG、WEBP、BMP(8ビット、16ビット、24ビットまたは32ビット)および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 x 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を使用すると、Webページ全体のフルスクリーンのスクリーンショットを撮ることができます。これを行うには、-1を渡す必要があります browserHeight
プロパティ。 画像がブラウザのサイズと一致するようにするには、-1を height
and 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; } });
これらの特別な値を使用すると、必要に応じてWebページ全体のフルスケールバージョンのスクリーンショットを作成できます。
GrabzItでは、次のようなHTML要素のスクリーンショットを撮ることができます。 div
or span
タグを付け、そのすべてのコンテンツをキャプチャします。 これを行うには、スクリーンショットを撮るHTML要素を CSSセレクター.
... <div id="features"> <img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3> </div> ...
以下の例では、idが「features」のdivを選択し、250 x 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; } });
次の例では、「機能」divの別のスクリーンショットを撮りますが、今回はdivの正確なサイズであるJPEG画像を出力します。
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; } });