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

JavaScript ArcGIS MapView.takeScreenshot用法及代码示例


基本信息

以下是所在类或对象的基本信息。

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

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

类： esri/views/MapView

继承: MapView > View > Accessor

自从：用于 JavaScript 4.0 的 ArcGIS API

用法说明

MapView.takeScreenshot函数(或属性)的定义如下：

takeScreenshot (options) {Promise<Screenshot>}


自从：ArcGIS 适用于 JavaScript 4.10 的 API

创建当前视图的屏幕截图。屏幕截图仅包括在画布上呈现的元素(所有地理元素)，但不包括覆盖的 DOM 元素(UI、弹出窗口、测量标签等)。默认情况下，会创建整个视图的屏幕截图。不同的选项允许创建不同类型的屏幕截图，包括以不同的纵横比、不同的分辨率进行屏幕截图和创建缩略图。

屏幕截图始终在视图的填充区域内进行(请参阅填充)。

参数：

规格：
类型说明
options Object
可选的

截图选项。

规格：
format

String

 可选的
默认值：PNG

生成的编码数据 url 的格式。

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

Layer[]

 可选的

使用时，仅此列表中的可见层将包含在输出中。
quality

Number

 可选的
默认值： 98

编码为 jpg 时编码图像的质量(0 到 100)。
width

Number

 可选的

屏幕截图的宽度(默认为区域宽度)。如果未指定，高度将根据屏幕截图区域的纵横比自动得出。
height

Number

 可选的

屏幕截图的高度(默认为区域高度)。如果未指定，宽度将根据屏幕截图区域的纵横比自动得出。
area

Object

 可选的

指定是否截取视图特定区域的屏幕截图。区域坐标相对于填充视图的原点(请参阅padding)，并将被裁剪为视图大小。默认为整个视图(不包括填充)。

规格：
x

Number

 可选的

区域的 x 坐标。
y

Number

 可选的

区域的 y 坐标。
width

Number

 可选的

区域的宽度。
height

Number

 可选的

区域的高度。
ignoreBackground

Boolean

 可选的
默认值：错误的

指示是否忽略 web Map的initial view properties 中设置的背景颜色。
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;
});
// 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大神的英文原创作品 MapView.takeScreenshot。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。