Web Yakalama ve Dönüştürme Araçları

Web Sitesi Ekran Görüntülerini Yakala veya HTML'yi Görüntülere Dönüştür

Node.js API

Aşağıdaki özellikleri kullanarak web sitelerinin mükemmel görüntü ekran görüntülerini oluşturun. GrabzIt'ın Node.js API'si. Ancak başlamadan önce aradıktan sonra bunu hatırlayın. url_to_image, html_to_image or file_to_image yöntemler save or save_to ekran görüntüsünü almak için yöntem çağrılmalıdır.

Temel Seçenekler

Bir web sayfasının ekran görüntüsünü almak için yalnızca bir parametre gereklidir veya HTML'yi dönüştür into bir görüntü aşağıdaki örnekte gösterildiği gibi.

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

Görüntü Ekran Görüntüsü Formatları

GrabzIt'ın Node.js API'si JPG, PNG, WEBP, BMP (8 bit, 16 bit, 24 bit veya 32 bit) ve TIFF gibi çeşitli formatlarda görüntü ekran görüntülerini alabilir. Görüntü ekran görüntüleri için varsayılan format JPG'dir. Bununla birlikte, bir JPG görüntünün kalitesi bu durumlarda bazı uygulamalar için yeterince iyi olmayabilir, çünkü PNG formatı görüntü ekran görüntüleri için önerilir, çünkü kalite ve dosya boyutu arasında iyi bir denge sağlar. Aşağıdaki örnek, PNG formatı kullanılarak alınmış bir görüntü ekran görüntüsünü gösterir.

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

Tarayıcı boyutu

Tarayıcı boyutu, çoğu durumda ekran görüntüsünü alırken kullanılacak tarayıcı penceresinin boyutuna işaret eder. Bu, varsayılan tarayıcı boyutunun ayarlanması gerekmediğinden tüm görevlerin tümü için yeterli olacaktır. Ancak, tarayıcı genişliğini ve yüksekliğini ayarlamak istiyorsanız, aşağıda bir örnek gösterilmektedir.

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

Görüntü Boyutunu Değiştir

Görüntünün boyutunu değiştirmek kolaydır, görüntüyü bozmadan yapmak biraz zordur. Tüm süreci kolaylaştırmak için bunu kullanmanızı öneririz. basit resim boyut hesaplayıcısı.

Görüntü genişliğini ve yüksekliğini, varsayılan olarak 1366 piksel olarak 728 olan tarayıcı genişliğinden ve yüksekliğinden daha büyük bir boyuta çıkarmak istiyorsanız, tarayıcı genişliğinin ve yüksekliğinin de eşleşmesi için artırılması gerekir.

Özel tanımlayıcı

Özel bir tanımlayıcıyı görüntü Aşağıda gösterildiği gibi yöntemler, bu değer daha sonra GrabzIt Node.js işleyicinize döndürülür. Örneğin, bu özel tanımlayıcı, bir ekran görüntüsünün belirli bir veritabanı kaydı ile ilişkilendirilmesine izin veren bir veritabanı tanıtıcısı olabilir.

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

Tam Boy Ekran Görüntüsü

GrabzIt, web sayfasına bir -1 aktarmanız gereken tam bir ekran görüntüsünün tamamını web sayfasının tamamında çekmenizi sağlar. browserHeight özellik, mal mülk, emlak. Görüntünün, tarayıcının boyutuyla eşleştiğinden emin olmak için, height ve width özellikleri.

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

Ayrıca kırpılmayan küçük resimleri de döndürebilirsiniz, ancak bunun büyük görüntüler oluşturabildiğine dikkat edin. Bunu yapmak için: height ve / veya width özellikleri. -1'ten geçen boyut kırpılmayacak.

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;
    }
});
Tam boy tarayıcı genişliği olmadığını unutmayın!

Bu özel değerleri kullanmak, isterseniz tüm web sayfasının tam ölçekli bir ekran görüntüsü oluşturabileceğiniz anlamına gelir!

Sayfa Öğesinin Ekran Görüntüsü Al

GrabzIt, bir HTML öğesinin ekran görüntüsünü örneğin div or span etiketleyin ve tüm içeriğini yakalayın. Bunu yapmak için, ekran görüntüsünü almak istediğiniz HTML öğesi bir CSS seçici.

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

Aşağıdaki örnekte, "özellik" kimliğine sahip olan div'yi seçeceğiz ve onu bir 250 x 250px JPEG görüntüsü olarak göstereceğiz.

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

Bir sonraki örnek "features" div'in başka bir ekran görüntüsünü alıyor ancak bu sefer div'in tam boyutunda olan bir JPEG görüntü çıktısı veriyor.

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