10-ArcGIS For JavaScript -- 三维场景导出为图片（PNG/JPEG）

道家人  论坛元老 | 2025-3-28 13:48:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1808|帖子 1808|积分 5424

前言

三维场景开发过程中，时常会出现必要保存当前场景的内容，去做一些分析或者场景展示。如果使用计算机自带的截图功能，只能将当前的页面截取到计算机本地，不能直接提供给程序去使用。
ArcGIS For JavaScript 的SceneView对象中提供了一个takeScreenshot函数，它可以创建当前视图的屏幕截图。屏幕截图仅包罗在画布上渲染的元素 (全部地理元素)，但不包罗覆盖的 DOM 元素 (UI、弹出窗口等)。默认环境下，会创建整个视图的屏幕截图。差别的选项允许创建差别类型的屏幕截图，包罗以差别的纵横比、差别的分辨率举行屏幕截图和创建缩略图。相关参数可以参考官网。

一、takeScreenshot参数



  • format：默认值为png，生成的编码数据 url 的格式。可能值：“jpg”|“png”。
  • quality：默认值为98，格式为 jpg 时编码图像的质量 (0 - 100)。
  • width：屏幕截图的宽度 (默以为地区宽度)。如果未指定，高度将根据屏幕截图地区的纵横比主动得出。
  • height：屏幕截图的高度 (默以为地区高度)。如果未指定，宽度将根据屏幕截图地区的纵横比主动得出。
  • area：指定是否截取视图特定地区的屏幕截图。地区坐标相对于内边距视图的原点 (请参阅 padding)，并将裁剪为视图巨细。默以为整个视图 (不包罗内边距)。
  • ignorePadding：指示是否应忽略视图内边距。将此属性设置为 true 以允许在屏幕截图中包含内边距地区。
二、示例

1、以当前视图相同的分辨率举行截图

  1. view.takeScreenshot().then(function(screenshot) {
  2.   let imageElement = document.getElementById("screenshotImage");
  3.   imageElement.src = screenshot.dataUrl;
  4. });
复制代码
2、从当前视图创建一个方形缩略图

  1. let options = {
  2.   width: 200,
  3.   height: 200
  4. };
  6. view.takeScreenshot(options).then(function(screenshot) {
  7.   let imageElement = document.getElementById("screenshotImage");
  8.   imageElement.src = screenshot.dataUrl;
  9. });
复制代码
3、取一个高分辨率的方形截图

  1. let options = {
  2.   width: 2048,
  3.   height: 2048
  4. };
  6. view.takeScreenshot(options).then(function(screenshot) {
  7.   let imageElement = document.getElementById("screenshotImage");
  8.   imageElement.src = screenshot.dataUrl;
  9. });
复制代码
3、在视图中心截取一个小地区的屏幕截图

  1. // 计算视图的大小，不包括padding的部分
  2. let padding = view.padding;
  3. let innerWidth = view.width - padding.left - padding.right;
  4. let innerHeight = view.height - padding.top - padding.bottom;
  6. // 期望的区域大小
  7. let width = 200;
  8. let height = 200;
  10. let options = {
  11.   area: {
  12.     x: (innerWidth - width) / 2,
  13.     y: (innerHeight - height) / 2,
  14.     width: width,
  15.     height: height
  16.   }
  17. };
  19. view.takeScreenshot(options).then(function(screenshot) {
  20.   let imageElement = document.getElementById("screenshotImage");
  21.   imageElement.src = screenshot.dataUrl;
  22. });
复制代码
三、完成代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
  9.     <script src="https://js.arcgis.com/4.30/"></script>
  10.     <style>
  11.         html,
  12.         body,
  13.         #viewDiv {
  14.             height: 100%;
  15.             width: 100%;
  16.             margin: 0;
  17.             padding: 0;
  18.         }
  20.         .screenshotDiv {
  21.             position: absolute;
  22.             top: 0;
  23.             left: 0;
  24.             right: 0;
  25.             bottom: 0;
  26.             text-align: center;
  27.             background-color: rgba(255, 255, 255, 0.8);
  28.         }
  30.         .screenshotDiv img {
  31.             border: 10px solid white;
  32.             box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
  33.         }
  35.         .screenshotDiv>* {
  36.             margin: 0.5em;
  37.         }
  39.         .actionButton {
  40.             padding: 0.4em;
  41.             color: black;
  42.             border: 1px solid #5c5e5e;
  43.             text-align: center;
  44.             background-color: #f1efef;
  45.             cursor: pointer;
  46.             width: 100px;
  47.             border-radius: 3px;
  48.             font-size: 16px;
  49.         }
  51.         .actionButton:hover,
  52.         .actionButton:focus {
  53.             background: #0079c1;
  54.             color: white;
  55.         }
  57.         .closeBtn {
  58.             display: inherit;
  59.             margin: auto;
  60.         }
  62.         .title {
  63.             position: absolute;
  64.             top: 20px;
  65.             width: 600px;
  66.             left: calc(50% - 300px);
  67.             background: #ffffff99;
  68.             padding: 5px;
  69.             border-radius: 3px;
  70.         }
  71.         .hide{
  72.             display: none;
  73.         }
  74.     </style>
  75.     <script>
  76.         require([
  77.             'esri/geometry/Point',
  78.             "esri/geometry/SpatialReference",
  79.             "esri/geometry/Mesh",
  80.             "esri/views/SceneView",
  81.             "esri/Map",
  82.             "esri/Graphic",
  83.             "esri/symbols/FillSymbol3DLayer",
  84.             "esri/symbols/MeshSymbol3D",
  85.             "esri/geometry/support/MeshMaterial",
  86.             "esri/geometry/support/MeshLocalVertexSpace",
  87.             "esri/layers/IntegratedMeshLayer"
  88.         ], (Point, SpatialReference, Mesh, SceneView, Map,
  89.             Graphic, FillSymbol3DLayer, MeshSymbol3D, MeshMaterial, MeshLocalVertexSpace, IntegratedMeshLayer) => {
  91.             let layer = new IntegratedMeshLayer({
  92.                 url: "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Utrecht_Buildings_2021/SceneServer"
  93.             })
  94.             let map = new Map({
  95.                 layers: [layer],
  96.                 basemap: 'satellite'
  97.             })
  98.             let center = [116.4074, 39.9042, 300];
  100.             let view = new SceneView({
  101.                 container: 'viewDiv',
  102.                 map,
  103.             })
  105.             view.when(function () {
  106.                 view.extent = layer.fullExtent;
  107.             })
  109.             const screenshotBtn = document.getElementById("screenshotBtn");
  110.             // const maskDiv = document.getElementById("maskDiv");
  111.             let screenshotDiv = document.getElementById("screenshotDiv");
  112.             const closeBtn = document.getElementById("closeBtn");
  113.             screenshotDiv.classList.add("hide");
  114.             view.ui.empty("top-right");
  115.             view.ui.add(screenshotBtn, "top-right");
  116.             let that = this;
  118.             screenshotBtn.addEventListener("click", () => {
  119.                 let self = that;
  120.                 let area = null;
  121.                 area = {
  122.                     x: view.canvas.clientLeft,
  123.                     y: view.canvas.clientTop,
  124.                     height: view.height,
  125.                     width: view.width
  126.                 }
  128.                 //"jpg"|"png"
  129.                 view.takeScreenshot({ area: area, format: "png" })
  130.                     .then((screenshot) => {
  131.                         console.log(screenshot);//screenshot.dataUrl为base64信息
  132.                         // let blob = self.base64ToBlob(screenshot.dataUrl, 'png')
  133.                         // self.download("test.png", blob);
  134.                         downloadFile(screenshot.dataUrl, 'download', '.png');
  135.                         showPreview(screenshot);//可以删除，只是为了展示截图信息
  136.                     })
  137.             });
  139.             /**
  140.              * desc: base64对象转blob文件对象
  141.              * @param urlData  ：数据的base64对象
  142.              * @param type  ：类型 png,pdf,doc,mp3等;
  143.              * @returns {Blob}：Blob文件对象
  144.              */
  145.             function base64ToBlob(urlData, type) {
  146.                 let arr = urlData.split(',');
  147.                 let array = arr[0].match(/:(.*?);/);
  148.                 let mime = (array && array.length > 1 ? array[1] : type) || type;
  149.                 // 去掉url的头，并转化为byte
  150.                 let bytes = window.atob(arr[2]);
  151.                 // 处理异常,将ascii码小于0的转换为大于0
  152.                 let ab = new ArrayBuffer(bytes.length);
  153.                 // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
  154.                 let ia = new Uint8Array(ab);
  155.                 for (let i = 0; i < bytes.length; i++) {
  156.                     ia[i] = bytes.charCodeAt(i);
  157.                 }
  158.                 return new Blob([ab], {
  159.                     type: mime
  160.                 });
  161.             }
  163.             /**
  164.            * desc: 下载导出文件
  165.            * @param blob  ：返回数据的blob对象或链接
  166.            * @param fileName  ：下载后文件名标记
  167.            * @param fileType  ：文件类 word(docx) excel(xlsx) ppt等
  168.            */
  169.            function downloadExportFile(blob, fileName, fileType) {
  170.                 let downloadElement = document.createElement('a');
  171.                 let href = blob;
  172.                 if (typeof blob == 'string') {
  173.                     downloadElement.target = '_blank';
  174.                 } else {
  175.                     href = window.URL.createObjectURL(blob); //创建下载的链接
  176.                 }
  177.                 downloadElement.href = href;
  178.                 downloadElement.download = fileName + '.' + fileType; //下载后文件名
  179.                 document.body.appendChild(downloadElement);
  180.                 downloadElement.click(); //触发点击下载
  181.                 document.body.removeChild(downloadElement); //下载完成移除元素
  182.                 if (typeof blob != 'string') {
  183.                     window.URL.revokeObjectURL(href); //释放掉blob对象
  184.                 }
  185.             }
  187.             /**
  188.              * desc: base64转文件并下载
  189.              * @param base64 {String} : base64数据
  190.              * @param fileType {String} : 要导出的文件类型png,pdf,doc,mp3等
  191.              * @param fileName {String} : 文件名
  192.              */
  193.              function downloadFile(base64, fileName, fileType) {
  194.                 let typeHeader = 'data:application/' + fileType + ';base64,' // 定义base64 头部文件类型
  195.                 let converedBase64 = typeHeader + base64;  // 拼接最终的base64
  196.                 let blob = base64ToBlob(converedBase64, fileType)  // 转成blob对象
  197.                 downloadExportFile(blob, fileName, fileType) // 下载文件
  198.             }
  200.             function showPreview(screenshot) {
  201.                 screenshotDiv.classList.remove("hide");
  202.                 // add the screenshot dataUrl as the src of an image element
  203.                 const screenshotImage = document.getElementsByClassName(
  204.                     "js-screenshot-image"
  205.                 )[0];
  206.                 screenshotImage.width = screenshot.data.width * 0.3;
  207.                 screenshotImage.height = screenshot.data.height * 0.3;
  208.                 screenshotImage.src = screenshot.dataUrl;
  209.             }
  211.             document.getElementById('closeBtn').addEventListener('click', function () {
  212.                 screenshotDiv.classList.add("hide");
  213.             })
  215.         })
  216.     </script>
  217. </head>
  219. <body>
  220.     <div id="viewDiv">
  221.         <button id="screenshotBtn" class="esri-widget actionButton" aria-label="Select screenshot area"
  222.             title="Select screenshot area">
  223.             截图
  224.         </button>
  226.         <div id="screenshotDiv" class="screenshotDiv">
  227.             <img class="js-screenshot-image" />
  228.             <button id="closeBtn" class="closeBtn action-button" aria-label="Back to webscene" title="Back to webscene">
  229.                 返回到web场景
  230.             </button>
  231.         </div>
  232.     </div>
  233. </body>
  235. </html>
复制代码
四、效果图




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

道家人

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表