使用GrabzIt創建網站縮略圖

Web開發人員通常需要創建網頁預覽。提高點擊率並在Facebook和其他社交媒體上分享。

默認情況下 GrabzIt的API 及在線截圖工具將通過縮小網站截圖來創建網站縮略圖。直到適合用戶包裝上允許的最大尺寸為止。

但是，如果您要創建自己的特定尺寸的縮略圖。然後，建議縮略圖小於browserWidth和browserHeight參數的大小。默認情況下分別是1366px和768px。

保持縮略圖寬度和高度與瀏覽器寬度和高度的比率也很重要。這樣一來，網頁屏幕截圖的縮略圖圖像就會變形。

縮略圖計算器

瀏覽器寬度 px

瀏覽器高度 px

百分比大小 19％

圖像寬度

195px

圖像高度

146px

該計算器自動為您的縮略圖計算最佳寬度和高度。基於縮略圖應佔瀏覽器寬度和高度的百分比。同時還要保持圖像與瀏覽器大小成比例，以停止圖像的任何拉伸。

為了方便起見，使用此計算器進行的任何更改都反映在下面的代碼示例中。

如何使用我們的網站縮略圖API

Int評估拍攝網頁縮略圖的能力 into使用GrabzIt的Screenshot API的應用程序。要開始使用，只需選擇以下XNUMX種受支持的編程語言之一即可查看代碼示例和更多說明。

ASP.NET
Java的
JavaScript的
Node.js的
Perl的
PHP
蟒蛇
REST API
紅寶石

此代碼示例說明了使用ASP.NET創建網站縮略圖的簡單性。要開始捕獲縮略圖下載ASP.NET庫。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 ASP.NET的屏幕快照API文檔找出使用GrabzIt API的所有方法。

ImageOptions options = new ImageOptions();
options.BrowserWidth = ;
options.BrowserHeight = ;
options.Width = ;
options.Height = ;

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
grabzIt.URLToImage("https://www.tesla.com", string.Empty, , , , , ImageFormat.jpg, 0, string.Empty, 
BrowserType.StandardBrowser, string.Empty); 
grabzIt.SaveTo("images/result.jpg");

此代碼示例說明了使用Java創建網站縮略圖的簡便性。要開始捕獲縮略圖下載Java庫。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 Java的屏幕快照API文檔找出使用GrabzIt API的所有方法。

ImageOptions options = new ImageOptions();
options.setBrowserWidth();
options.setBrowserHeight();
options.setWidth();
options.setHeight();

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
grabzIt.URLToImage("https://www.tesla.com", options); 
grabzIt.SaveTo("images/result.jpg");

此代碼示例顯示了使用JavaScript創建網站縮略圖的簡便性。開始捕獲縮略圖下載 GrabzIt的JavaScript庫。然後獲取您的API 關鍵和秘密, 添加域您要使用JavaScript，然後簽出 JavaScript的屏幕快照API文檔找出使用GrabzIt API的所有方法。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@<%= APIVersion.JavaScript %>/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"bwidth":,"bheight":,"width":,"height":}).Create();
</script>

此代碼示例說明了使用Node.js創建網站縮略圖非常容易。要開始捕獲縮略圖下載Node.js程序包。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 Node.js的屏幕快照API文檔找出使用GrabzIt API的所有方法。

var grabzit = require('grabzit');

var options = {"width":, "height":, 
    "browserHeight":, "browserWidth":};

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
client.url_to_image("https://www.tesla.com", options);
client.save_to("images/result.jpg", function (error, id){
    if (error != null){
        throw error;
    }
});

此代碼示例說明了使用Perl創建網站縮略圖的簡單性。要開始捕獲縮略圖下載Perl庫。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 Perl的屏幕快照API文檔找出使用GrabzIt API的所有方法。

#!/usr/bin/perl

use GrabzItClient;

$options = GrabzItImageOptions->new();
$options->browserWidth();
$options->browserHeight();
$options->width();
$options->height();

$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");
$grabzIt->URLToImage("https://www.tesla.com", '', , , , );
$grabzIt->SaveTo("images/result.jpg");

此代碼示例說明了使用PHP創建網站縮略圖的簡單性。要開始捕獲縮略圖下載PHP庫。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查屏幕快照API文檔，用於PHP 找出使用GrabzIt API的所有方法。

include("GrabzItClient.php");

$options = new \GrabzIt\GrabzItImageOptions();
$options->setBrowserWidth();
$options->setBrowserHeight();
$options->setWidth();
$options->setHeight();

$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
$grabzIt->URLToImage("https://www.tesla.com", $options); 
$grabzIt->SaveTo("images/result.jpg");

此代碼示例說明了使用Python創建網站縮略圖的簡單性。要開始捕獲縮略圖下載Python庫。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 Python的屏幕快照API文檔找出使用GrabzIt API的所有方法。

from GrabzIt import GrabzItClient
from GrabzIt import GrabzItImageOptions

options = GrabzItImageOptions.GrabzItImageOptions()
options.browserWidth = 
options.browserHeight = 
options.width = 
options.height = 

grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")
grabzIt.URLToImage("https://www.tesla.com", options) 
grabzIt.SaveTo("images/result.jpg")

此示例說明使用GrabzIt的RESTful API創建網站縮略圖非常容易。看看 RESTful屏幕截圖API 文檔以查找可以使用GrabzIt的所有方式。

https://api.grabz.it/services/convert?key=Sign in to view your Application Key&format=jpg&bwidth=&bheight=&width=&height=&url=https%3A%2F%2Fwww.tesla.com%2F

此代碼示例說明了使用Ruby創建網站縮略圖的簡單性。要開始捕獲縮略圖下載Ruby Gem。然後獲取您的API 關鍵和秘密進而使用演示包含在其中。然後檢查 Ruby的屏幕快照API文檔找出使用GrabzIt API的所有方法。

require 'grabzit'

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

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")
grabzItClient.url_to_image("https://www.tesla.com", options)	
grabzItClient.save_to("images/result.jpg")