Tools om het web vast te leggen en te converteren

Maak website-screenshots of converteer HTML naar afbeeldingen

Node.js API

Maak perfecte afbeelding screenshots van websites met behulp van de volgende functies van GrabzIt's Node.js API. Onthoud echter voordat u begint dat nadat u de url_to_image, html_to_image or file_to_image methoden de save or save_to methode moet worden aangeroepen om de screenshot te maken.

Basisopties

Er is slechts één parameter vereist om een ​​screenshot van een webpagina te maken of HTML omzetten inteen afbeelding zoals getoond in het volgende voorbeeld.

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

Afbeelding Screenshot Indelingen

De API van Node.js van GrabzIt kan beeldafbeeldingen maken in verschillende formaten, waaronder JPG, PNG, WEBP, BMP (8 bit, 16 bit, 24 bit of 32 bit) en TIFF. Het standaardformaat voor schermafbeeldingen van afbeeldingen is JPG. De kwaliteit van een JPG-afbeelding is echter voor sommige toepassingen mogelijk niet goed genoeg in deze omstandigheden. Het PNG-formaat wordt aanbevolen voor schermafbeeldingen van afbeeldingen, omdat het een goede balans biedt tussen kwaliteit en bestandsgrootte. In het onderstaande voorbeeld wordt een screenshot van een afbeelding gemaakt met het PNG-formaat.

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

Browsergrootte

De browsergrootte verwijst naar de grootte van het browservenster die wordt gebruikt bij het maken van de schermafbeelding. In de meeste gevallen hoeft dit niet te worden ingesteld, omdat de standaardbrowser voldoende is voor bijna alle taken. Als u echter de breedte en hoogte van de browser wilt instellen, wordt hieronder een voorbeeld weergegeven.

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

Wijzig afbeeldingsgrootte

Het wijzigen van de grootte van een afbeelding is eenvoudig, het is een beetje moeilijker zonder de afbeelding te vervormen. Om het hele proces eenvoudiger te maken, raden we u aan dit te gebruiken eenvoudige beeldafmetingscalculator.

Als u de breedte en hoogte van de afbeelding wilt vergroten tot een grootte die groter is dan de breedte en hoogte van de browser, die standaard 1366 bij 728 pixels is, moeten de breedte en hoogte van de browser ook worden aangepast om overeen te komen.

Aangepaste identificatie

U kunt een aangepaste identificatie doorgeven aan de beeld methoden zoals hieronder weergegeven, wordt deze waarde vervolgens teruggegeven aan uw GrabzIt Node.js-handler. Deze aangepaste identifier kan bijvoorbeeld een database-identifier zijn, waardoor een screenshot aan een bepaald database-record kan worden gekoppeld.

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 op volledige lengte

Met GrabzIt kunt u een volledige screenshot maken van een hele webpagina om dit te doen moet u een -1 doorgeven aan de browserHeight eigendom. Om ervoor te zorgen dat de afbeelding overeenkomt met de grootte van de browser, geeft u dit een -1 door aan de height en width eigenschappen.

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

U kunt ook miniaturen retourneren die niet zijn bijgesneden, maar let op dit kan grote afbeeldingen maken. Geef hiervoor een -1 door aan de height en / of width eigendommen. De dimensie die wordt doorgegeven als een -1 wordt niet bijgesneden.

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;
    }
});
Let op: er is geen browserbreedte over de volledige lengte!

Als u deze speciale waarden gebruikt, kunt u desgewenst een screenshot maken van een volledige versie van de hele webpagina.

Maak een screenshot van een pagina-element

Met GrabzIt kunt u een screenshot maken van een HTML-element, zoals een div or span tag, en leg al zijn inhoud vast. Om dit te doen, moet het HTML-element waarvan u een screenshot wilt maken, worden opgegeven als een CSS-selector.

...
<div id="features">
	<img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3>
</div>
...

Voor het onderstaande voorbeeld selecteren we de div met de id "features" en voeren deze uit als een 250 x 250px JPEG-afbeelding.

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

In het volgende voorbeeld wordt nog een screenshot gemaakt van de div "features", maar deze keer wordt een JPEG-afbeelding met de exacte grootte van de div uitgevoerd.

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