如何創建高清截圖？

Occasionally you may want to create high definition (HD) or retina screenshots. These High Definition screenshots have increased resolution but are slower and become even slower with larger dimensions for this reason it is recommended not to create too large an image. As such you will probably also need to specify a delay to give the screenshot chance to render.

以下代碼顯示瞭如何通過將HD參數設置為true來製作每種語言的高清屏幕截圖。通過將圖像的寬度和高度加倍，從而將標準屏幕截圖的分辨率提高了四倍，從而創建了高分辨率的圖像。但是這會適得其反 將寬度和高度設置為-1以外的任何值 因為這將導致圖像再次縮小！

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

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
ImageOptions options = new ImageOptions();
options.HD = true;
options.OutputWidth = -1;
options.OutputHeight = -1;
grabzIt.URLToImage("https://www.bbc.co.uk", options);
grabzIt.SaveTo("images/result.jpg");

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
ImageOptions options = new ImageOptions();
options.setHd(true);
options.setWidth(-1);
options.setHeight(-1);
grabzIt.URLToImage("https://www.bbc.co.uk", options);
grabzIt.SaveTo("images/result.jpg");

<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.bbc.co.uk", 
{"hd":true,"width":-1,"height":-1}).Create();
</script>

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"hd":true,"width":"-1","height":"-1"};
client.url_to_image("https://www.bbc.co.uk", options);
client.save_to("images/result.jpg", function (error, id){
    if (error != null){
        throw error;
    }
});

$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = GrabzItImageOptions->new();
$options->hd(1);
$options->width(-1);
$options->height(-1);
$grabzIt->URLToImage("https://www.bbc.co.uk", $options);
$grabzIt->SaveTo("images/result.jpg");

$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = new \GrabzIt\GrabzItImageOptions();
$options->setHD(true);
$options->setWidth(-1);
$options->setHeight(-1);
$grabzIt->URLToImage("https://www.bbc.co.uk", $options);
$grabzIt->SaveTo($filepath);

grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzItImageOptions.GrabzItImageOptions()
options.hd  = True
options.width = -1
options.height = -1
grabzIt.URLToImage("https://www.bbc.co.uk", options)
grabzIt.SaveTo("images/result.jpg")

grabzIt = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzIt::ImageOptions.new()
options.hd = true
options.width = -1
options.height = -1
grabzItClient.url_to_image("https://www.bbc.co.uk", options)
grabzItClient.save_to("images/result.jpg")

左側是標準屏幕截圖的示例，右側是由上面的代碼生成的高清屏幕截圖，兩個屏幕截圖的高度相同。

精確設置圖像分辨率

還可以通過指定大於瀏覽器寬度的寬度來創建不同大小的高清屏幕截圖。然後GrabzIt縮放瀏覽器以停止拉伸圖像。但是以這種方式創建高清屏幕截圖時進行的測量 不准確，這就是為什麼在這種模式下，全長屏幕截圖的大小或縮放比例不一定總是完美的原因。

如果您在使用此方法創建正確縮放的高清晰度圖像時遇到問題，請嘗試使用圖像寬度和高度為原始瀏覽器尺寸的x2，x3或x4。

定位元素時，此模式也將無法正常工作。如果要定位元素，建議您如上所述設置HD參數。

更多文章社區問題