当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。