捕獲和轉換Web的工具

捕獲網站截圖或將HTML轉換為圖像Ruby API

使用以下功能生成更好的網頁圖像截圖或將HTML直接轉換為圖像 GrabzIt的Ruby API。 但是,在開始之前,請記住 url_to_image, html_to_image or file_to_image 方法 save or save_to 必須調用方法來創建圖像。

基本選項

只需一個參數即可截取網頁或 轉換HTML intoa圖片 如以下示例所示。

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

圖像格式

GrabzIt的Ruby API可以採取幾種格式的圖像截圖,包括JPG,PNG,WEBP,BMP(8位,16位,24位或32位)和TIFF。 圖像截圖的默認格式為JPG。 但是,在這些情況下,對於某些應用程序而言,JPG圖像的質量可能不夠好,建議對圖像截圖使用PNG格式,因為它可以在質量和文件大小之間取得良好的平衡。 以下示例顯示了使用PNG格式拍攝的圖像截圖。

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")

瀏覽器大小

瀏覽器大小是指在大多數情況下不需要捕獲屏幕快照時將使用的瀏覽器窗口的大小,因為對於所有大多數任務而言,默認瀏覽器大小就足夠了。 要設置瀏覽器大小,只需將一個值傳遞給 browserWidth - browserHeight 的方法 ImageOptions 類。

更改圖像尺寸

更改圖像的大小很容易,但要做到不扭曲圖像就更難了。 為了簡化整個過程,我們建議您使用 簡單的圖像尺寸計算器.

如果要將圖像的寬度和高度增加到大於瀏覽器的寬度和高度(默認為1024 x 728像素),則瀏覽器的寬度和高度也必須增加以匹配。

自訂識別碼

您可以將自定義標識符傳遞給 圖片 方法,如下所示,然後將該值返回給您的GrabzIt Ruby處理程序。 例如,此自定義標識符可以是數據庫標識符,從而允許將屏幕截圖與特定的數據庫記錄相關聯。

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.file_to_image("example.html", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")

全長截圖

GrabzIt允許您拍攝整個網頁的完整屏幕截圖,您需要將-1傳遞給 browserHeight 方法。 為了確保圖片與瀏覽器大小匹配,請將-1傳遞給 height - width 屬性。

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

您還可以返回未裁剪的縮略圖,但是請注意,這會創建較大的圖像。 為此,將-1傳遞給 height 和/或 width 方法。 通過-1的尺寸將不會被裁剪。

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
請注意,瀏覽器沒有全長!

使用這些特殊值意味著您可以創建一個截圖,該截圖是整個網頁的完整版本!

截取頁面元素的屏幕截圖

GrabzIt允許您截取HTML元素的屏幕截圖,例如 div or span 標記並捕獲其所有內容。 為此,必須將要截屏的HTML元素的ID或類指定為 CSS選擇器.

...
<div id="features">
	<img src="http://www.example.com/rocket.jpg"/><h3>Rocket Launch Next Week</h3>
</div>
...

對於下面的示例,我們將選擇id為“ features”的div,並將其輸出為250 x 250px JPEG圖像。

grabzItClient = GrabzIt::Client.new("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
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

下一個示例獲取“功能” div的另一個屏幕截圖,但是這次輸出的JPEG圖像恰好是div的大小。

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

# The -1 indicates that image should not be cropped
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"
options.browserHeight = -1

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")