Strumenti per acquisire e convertire il Web

Cattura schermate di siti Web o converti HTML in immagini

API Node.js

Crea schermate di immagini perfette di siti Web utilizzando le seguenti funzionalità di API Node.js 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 acquisire lo screenshot.

Opzioni di base

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

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

Formati di schermate immagine

L'API Node.js di GrabzIt può acquisire screenshot 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 gli screenshot delle 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.

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;
    }
});

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à. Tuttavia, se si desidera impostare la larghezza e l'altezza del browser, viene mostrato un esempio di seguito.

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;
    }
});

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 Node.js. Ad esempio, questo identificatore personalizzato potrebbe essere un identificatore del database, consentendo di associare uno screenshot a un particolare record del database.

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;
    }
});

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 proprietà. Per assicurarsi che l'immagine corrisponda alle dimensioni del browser, passare un -1 al file height ed width proprietà.

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;
    }
});

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 proprietà. La dimensione che viene passata a -1 non verrà ritagliata.

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;
    }
});
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/boat.jpg"/><h3>New Boat Launched</h3>
</div>
...

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

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;
    }
});

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