Cattura schermate di siti Web o converti HTML in immagini

Produci schermate di immagini migliori di pagine Web o converti HTML direttamente in immagini utilizzando le seguenti funzionalità di API Ruby di GrabzIt. Tuttavia, prima di iniziare, ricordare che dopo aver chiamato il url_to_image, html_to_image or file_to_image metodi il save or save_to Il metodo deve essere chiamato per creare l'immagine.

Opzioni di base

È necessario un solo parametro per acquisire uno screenshot di una pagina Web o converti HTML into immagine come mostrato nell'esempio seguente.

URL per immagine
HTML a immagine
File a immagine

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

Formati immagine

L'API Ruby di GrabzIt può catturare schermate di immagini in diversi formati, tra cui JPG, PNG, WEBP, BMP (bit 8, bit 16, bit 24 o bit 32) e TIFF. Il formato predefinito per gli screenshot delle immagini è JPG. Tuttavia, la qualità di un'immagine JPG potrebbe non essere abbastanza buona per alcune applicazioni in queste circostanze, il formato PNG è raccomandato per le schermate di immagini in quanto fornisce un buon equilibrio tra qualità e dimensione del file. L'esempio seguente mostra uno screenshot di immagine acquisito utilizzando il formato PNG.

URL per immagine
HTML a immagine
File a immagine

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")

Dimensione del browser

La dimensione del browser si riferisce alla dimensione della finestra del browser che verrà utilizzata durante l'acquisizione dello screenshot nella maggior parte dei casi, ciò non deve essere impostato poiché la dimensione predefinita del browser sarà sufficiente per tutte le attività. Per impostare la dimensione del browser, basta passare un valore a browserWidth e browserHeight metodi del ImageOptions classe.

Cambia dimensione immagine

Cambiare le dimensioni di un'immagine è facile, farlo senza distorcere l'immagine è un po 'più difficile. Per semplificare l'intero processo, ti consigliamo di utilizzarlo semplice calcolatore delle dimensioni dell'immagine.

Se si desidera aumentare la larghezza e l'altezza dell'immagine ad una dimensione maggiore della larghezza e dell'altezza del browser, che per impostazione predefinita è 1366 per pixel 728, è necessario aumentare anche la larghezza e l'altezza del browser in modo che corrispondano.

Identificatore personalizzato

È possibile passare un identificatore personalizzato a Immagine metodi come mostrato di seguito, questo valore viene quindi restituito al gestore GrabzIt Ruby. Ad esempio, questo identificatore personalizzato potrebbe essere un identificatore del database, consentendo di associare uno screenshot a un particolare record del database.

URL per immagine
HTML a immagine
File a immagine

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")

Screenshot a figura intera

GrabzIt ti permette di fare uno screenshot completo di un'intera pagina web per fare questo è necessario passare un -1 al browserHeight metodo. Per assicurarsi che l'immagine corrisponda alle dimensioni del browser, passare un -1 al file height e width attributi.

URL per immagine
HTML a immagine
File a immagine

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")

Puoi anche restituire miniature che non sono ritagliate, ma fai attenzione perché puoi creare immagini di grandi dimensioni. Per fare questo passare un -1 al file height e / o width metodi. La dimensione che viene passata a -1 non verrà ritagliata.

URL per immagine
HTML a immagine
File a immagine

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")

Nota che non esiste una larghezza del browser a lunghezza intera!

L'uso di questi valori speciali significa che è possibile creare uno screenshot che sia una versione in scala reale dell'intera pagina Web, se lo si desidera!

Cattura uno screenshot di un elemento della pagina

GrabzIt ti permette di fare uno screenshot di un elemento HTML, come a div or span tag e acquisisci tutto il suo contenuto. Per fare ciò, l'elemento HTML che vuoi catturare deve essere specificato come Selettore CSS.

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

Nell'esempio seguente selezioneremo il div con l'id "caratteristiche" e lo emetteremo come immagine JPEG 250 x 250px.

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")

Il prossimo esempio prende un altro screenshot del div "features" ma questa volta genera un'immagine JPEG delle dimensioni esatte del 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")