當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JavaScript ArcGIS SceneView.takeScreenshot用法及代碼示例


基本信息

以下是所在類或對象的基本信息。

AMD: require(["esri/views/SceneView"], (SceneView) => { /* code goes here */ });

ESM: import SceneView from "@arcgis/core/views/SceneView";

類： esri/views/SceneView

繼承: SceneView > View > Accessor

自從：用於 JavaScript 4.0 的 ArcGIS API

用法說明

SceneView.takeScreenshot函數(或屬性)的定義如下：

takeScreenshot (options) {Promise<Screenshot>}


自從：ArcGIS 適用於 JavaScript 4.9 的 API

創建當前視圖的屏幕截圖。屏幕截圖僅包括在畫布上呈現的元素(所有地理元素)，但不包括覆蓋的 DOM 元素(UI、彈出窗口等)。默認情況下，會創建整個視圖的屏幕截圖。不同的選項允許創建不同類型的屏幕截圖，包括以不同的縱橫比、不同的分辨率進行屏幕截圖和創建縮略圖。

屏幕截圖始終在視圖的填充區域內進行(請參閱填充)。

參數：

規格：
類型說明
options Object
可選的

截圖選項。

規格：
format

String

 可選的
默認值：PNG

生成的編碼數據 url 的格式。

可能的值："jpg"|"png"
quality

Number

 可選的
默認值： 98

格式為 jpg 時編碼圖像的質量(0 到 100)。
width

Number

 可選的

屏幕截圖的寬度(默認為區域寬度)。如果未指定，高度將根據屏幕截圖區域的縱橫比自動得出。
height

Number

 可選的

屏幕截圖的高度(默認為區域高度)。如果未指定，寬度將根據屏幕截圖區域的縱橫比自動得出。
area

Object

 可選的

指定是否截取視圖特定區域的屏幕截圖。區域坐標相對於填充視圖的原點(請參閱padding)，並將被裁剪為視圖大小。默認為整個視圖(不包括填充)。

規格：
x

Number

 可選的

區域的 x 坐標。
y

Number

 可選的

區域的 y 坐標。
width

Number

 可選的

區域的寬度。
height

Number

 可選的

區域的高度。
ignorePadding

Boolean

 可選的

指示是否應忽略視圖填充。將此屬性設置為 true 以允許在屏幕截圖中包含填充區域。

返回：

類型 說明
Promise<Screenshot> 解析後，返回一個包含編碼 dataUrl 和原始圖像數據的對象。

例子：

// Take a screenshot at the same resolution of the current view
view.takeScreenshot().then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Create a square thumbnail from the current view
let options = {
  width: 200,
  height: 200
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Take a high resolution, square screenshot
let options = {
  width: 2048,
  height: 2048
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Take a screenshot of a small area at the center of the view

// Compute the size of the view excluding potential padding
let padding = view.padding;
let innerWidth = view.width - padding.left - padding.right;
let innerHeight = view.height - padding.top - padding.bottom;

// Desired size of the area
let width = 200;
let height = 200;

let options = {
  area: {
    x: (innerWidth - width) / 2,
    y: (innerHeight - height) / 2,
    width: width,
    height: height
  }
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio indicates the display has 2x the pixel density of typical screens
let pixelRatio = 2;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });
// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio is the resolution of the display capturing the image
let pixelRatio = window.devicePixelRatio;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });

相關用法


注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 SceneView.takeScreenshot。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。