GrabzItでWebサイトのサムネイルを作成する

多くの場合、Web開発者はWebページのプレビューを作成する必要があります。クリックスルー率を改善し、Facebookやその他のソーシャルメディアで共有するため。

デフォルトでは GrabzItのAPI とオンラインスクリーンショットツールウェブサイトのスクリーンショットを縮小してウェブサイトのサムネイルを作成します。ユーザーのパッケージで許可されている最大サイズ内に収まるまで。

ただし、独自の特定のサイズに合わせてサムネイル画像を作成する場合。次に、サムネイルがbrowserWidthパラメーターとbrowserHeightパラメーターのサイズよりも小さいことをお勧めします。これはデフォルトでそれぞれ1024pxと768pxです。

また、ブラウザの幅と高さに対するサムネイルの幅と高さの比率を維持することも重要です。これにより、Webページのスクリーンショットのサムネイル画像が歪むのを防ぎます。

サムネイル電卓

ブラウザの幅 px

ブラウザの高さ px

パーセントサイズ 19%以下

画像の幅

195px

画像の高さ

146px

この計算機は、サムネイルに最適な幅と高さを自動的に計算します。ブラウザーの幅と高さのサムネイルの割合に基づきます。また、画像の伸縮を止めるために、画像をブラウザのサイズに比例させます。

便宜上、この計算機で行われた変更は、以下のコード例に反映されます。

Website Thumbnail APIの使用方法

Webページのサムネイルを取得する機能を統合する into GrabzItのスクリーンショットAPIを使用したアプリケーション。開始するには、以下のサポートされているXNUMXつのプログラミング言語のいずれかを選択して、コード例と詳細な手順を参照してください。

ASP.NET
Java
JavaScriptを
Node.jsの
パール
PHP
Python
REST API
ルビー

このコード例は、ASP.NETを使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには ASP.NETライブラリをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 ASP.NETのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

ImageOptions options = new ImageOptions();
options.BrowserWidth = 1024;
options.BrowserHeight = 768;
options.Width = 195;
options.Height = 146;

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, 1024, 768, 195, 146, ImageFormat.jpg, 0, string.Empty, 
BrowserType.StandardBrowser, string.Empty); 
grabzIt.SaveTo("images/result.jpg");

このコード例は、Javaを使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには Javaライブラリをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 JavaのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

ImageOptions options = new ImageOptions();
options.setBrowserWidth(1024);
options.setBrowserHeight(768);
options.setWidth(195);
options.setHeight(146);

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を使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのダウンロードを開始するには GrabzItのJavaScriptライブラリ。次に、APIを取得します鍵と秘密, ドメインを追加 JavaScriptを使用してから、 JavaScriptのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

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

このコード例は、Node.jsを使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには Node.jsパッケージをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 Node.jsのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

var grabzit = require('grabzit');

var options = {"width":195, "height":146, 
    "browserHeight":768, "browserWidth":1024};

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を使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには Perlライブラリをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 PerlのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

#!/usr/bin/perl

use GrabzItClient;

$options = GrabzItImageOptions->new();
$options->browserWidth(1024);
$options->browserHeight(768);
$options->width(195);
$options->height(146);

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

このコード例は、PHPを使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには PHPライブラリをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 PHPのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

include("GrabzItClient.php");

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

$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を使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには Pythonライブラリをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 PythonのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

from GrabzIt import GrabzItClient
from GrabzIt import GrabzItImageOptions

options = GrabzItImageOptions.GrabzItImageOptions()
options.browserWidth = 1024
options.browserHeight = 768
options.width = 195
options.height = 146

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.ashx?key=Sign in to view your Application Key&format=jpg&bwidth=1024&bheight=768&width=195&height=146&url=https%3A%2F%2Fwww.tesla.com%2F

このコード例は、Rubyを使用してWebサイトのサムネイルを簡単に作成できることを示しています。サムネイルのキャプチャを開始するには Ruby Gemをダウンロードする。次に、APIを取得します鍵と秘密その後デモを使用する内に含まれます。次に、 RubyのスクリーンショットAPIドキュメント GrabzItのAPIを使用できるすべての方法を見つけます。

require 'grabzit'

options = GrabzIt::ImageOptions.new()
options.browserWidth = 1024
options.browserHeight = 768
options.width = 195
options.height = 146

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

サムネイルの作成を開始