UNPKG

@realsee/five

Version:

Realsee Renderer SDK

109 lines (102 loc) • 26.5 kB
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>features/image-options | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">features/image-options</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="imageoptions-图片配置" class="tsd-anchor-link">ImageOptions (图片配置)<a href="#imageoptions-图片配置" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1> <ul> <li><strong>Summary</strong>: <code>Five</code> 初始化参数 <code>imageOptions</code> 用于全局配置全景图与资源的加载策略,支持多云/私有化部署映射、图片格式自适应、质量控制及内部瓦片裁剪。</li> <li><strong>Schema</strong>: <code>ImageOptions</code> 接口定义及相关配置。</li> <li><strong>Concepts</strong>: CDN Mapping, Format Adaptation, Tile Cutting.</li> <li><strong>Configuration</strong>: <code>imageOptions</code> 参数详解。</li> <li><strong>Examples</strong>: 基础优化、多云部署映射、瓦片裁剪调用。</li> </ul> <h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <h3 id="imageoptions" class="tsd-anchor-link">ImageOptions<a href="#imageoptions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <blockquote> <p><strong>Definition</strong>: <a href="../../five/types/imageOptions.d.ts">ImageOptions</a></p> </blockquote> <p>全局图片加载配置接口。</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">ImageOptions</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 图片类型标识 (内部使用,如 &quot;pano.front&quot;) */</span><br/><span class="hl-1"> </span><span class="hl-6">key</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 图片尺寸参数 (例如 512, 1024...) */</span><br/><span class="hl-1"> </span><span class="hl-6">size</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 图片质量参数 (0-100) */</span><br/><span class="hl-1"> </span><span class="hl-6">quality</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 图片格式参数</span><br/><span class="hl-8"> * 自动降级逻辑:如果指定格式(如 avif/webp)当前浏览器不支持,会自动降级为 jpg</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-6">format</span><span class="hl-1">?: </span><span class="hl-9">&quot;jpg&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;jpeg&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;png&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;heif&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;heic&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;webp&quot;</span><span class="hl-1"> | </span><span class="hl-9">&quot;avif&quot;</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 图片裁切 [x, y, width, height]</span><br/><span class="hl-8"> * 通常用于内部工具获取局部图片,初始化 Five 时一般不设置此项</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-6">cut</span><span class="hl-1">?: [</span><span class="hl-13">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-13">y</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-13">width</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-13">height</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-8">/** 锐化参数 (仅部分 CDN 支持) */</span><br/><span class="hl-1"> </span><span class="hl-6">sharpen</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 域名匹配规则,用于多云或私有化部署 */</span><br/><span class="hl-1"> </span><span class="hl-6">mappings</span><span class="hl-1">?: </span><span class="hl-7">ImageURLMappings</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 自定义 URL 转换函数 */</span><br/><span class="hl-1"> </span><span class="hl-5">transform</span><span class="hl-1">?: (</span><span class="hl-6">url</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-6">options</span><span class="hl-1">: </span><span class="hl-7">ImageURLOptions</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h3 id="imageurlmappings" class="tsd-anchor-link">ImageURLMappings<a href="#imageurlmappings" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>域名映射规则配置,用于支持多云存储或私有化部署。</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">ImageURLMappings</span><span class="hl-1"> {</span><br/><span class="hl-1"> [</span><span class="hl-6">publicDomain</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">]: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** CDN 类型,目前支持 &#39;tencentCloud&#39; | &#39;aliyun&#39; 用于区分特定云厂商的图片处理参数 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;type&quot;</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全景图域名映射列表 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;pano&quot;</span><span class="hl-1">: [</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">string</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全景图瓦片域名映射列表 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;tile&quot;</span><span class="hl-1">: [</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">string</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-8">/** 3D Tile 模型域名映射列表 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;model&quot;</span><span class="hl-1">: [</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">string</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-8">/** AT3D 材质域名映射列表 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;texture&quot;</span><span class="hl-1">: [</span><span class="hl-7">string</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-8">/** 默认域名映射列表 */</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;default&quot;</span><span class="hl-1">: [</span><span class="hl-7">string</span><span class="hl-1">];</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <h3 id="cdn-mapping-多云部署与私有化" class="tsd-anchor-link">CDN Mapping (多云部署与私有化)<a href="#cdn-mapping-多云部署与私有化" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>通过 <code>mappings</code> 字段,可以将原始数据中的 <strong>初始域名</strong>(<code>publicDomain</code>,即数据中尚未进行资源分流的统一地址)映射到不同用途的具体域名下。</p> <ul> <li><strong>资源分流</strong>: 针对不同资源类型配置不同域名: <ul> <li><code>pano</code>: 全景图</li> <li><code>tile</code>: 全景图瓦片</li> <li><code>model</code>: 3D Tile 模型</li> <li><code>texture</code>: AT3D 材质</li> </ul> </li> <li><strong>负载均衡</strong>: 每个资源类型支持配置多个域名(如 <code>[domain1, domain2]</code>),SDK 会自动进行轮询负载均衡。</li> <li><strong>私有化支持</strong>: 将初始数据中的通用域名映射到内网或私有 OSS 域名。</li> <li><strong>CDN 适配</strong>: 指定 <code>type</code> ('tencentCloud' | 'aliyun') 可启用特定云厂商的图片处理参数(如缩放、裁剪、格式转换)。</li> </ul> <h3 id="format-adaptation-浏览器兼容性" class="tsd-anchor-link">Format Adaptation (浏览器兼容性)<a href="#format-adaptation-浏览器兼容性" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>SDK 内置了图片格式兼容性检测(<code>imageSupport</code>)。</p> <ul> <li><strong>自动降级</strong>: 当配置 <code>format: 'webp'</code> 或 <code>format: 'avif'</code> 时,SDK 会检测当前浏览器是否支持该格式。如果不支持,自动降级请求 <code>jpg</code> 格式,确保图片能正常显示。</li> <li><strong>性能优化</strong>: 推荐默认开启 <code>avif</code>,在支持的浏览器上大幅减小流量消耗。</li> </ul> <h3 id="tile-cutting-内部瓦片裁剪" class="tsd-anchor-link">Tile Cutting (内部瓦片裁剪)<a href="#tile-cutting-内部瓦片裁剪" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>利用云厂商的图片处理能力(如腾讯云 ImageMogr2 或阿里云 OSS Process),可以通过 <code>cut</code> 参数获取大图的局部区域。</p> <ul> <li><strong>应用场景</strong>: 内部工具调用、生成特定视角的缩略图、动态获取全景图的某一部分。</li> <li><strong>调用方式</strong>: 通常配合 <code>imageURL</code> 工具函数使用。</li> </ul> <h2 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <p>在 <code>new Five()</code> 时传入 <code>imageOptions</code>。</p> <table> <thead> <tr> <th style="text-align:left">参数</th> <th style="text-align:left">类型</th> <th style="text-align:left">说明</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>format</code></td> <td style="text-align:left">string</td> <td style="text-align:left">推荐设置为 <code>&quot;avif&quot;</code>,SDK 会自动处理兼容性。</td> </tr> <tr> <td style="text-align:left"><code>quality</code></td> <td style="text-align:left">number</td> <td style="text-align:left">图片质量 (0-100),非必要不设置。</td> </tr> <tr> <td style="text-align:left"><code>mappings</code></td> <td style="text-align:left">object</td> <td style="text-align:left">域名映射表,用于替换数据中的原始域名,非必要不设置。</td> </tr> <tr> <td style="text-align:left"><code>size</code></td> <td style="text-align:left">number</td> <td style="text-align:left">全景图初始尺寸,推荐设置为 <code>512</code>,可根据场景调整。</td> </tr> </tbody> </table> <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <h3 id="基础优化配置-推荐" class="tsd-anchor-link">基础优化配置 (推荐)<a href="#基础优化配置-推荐" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>启用 AVIF 格式并设置初始尺寸为 <code>512</code>,适用于大多数场景。</p> <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">&quot;avif&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">size:</span><span class="hl-1"> </span><span class="hl-11">512</span><span class="hl-1">,</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span> </code><button type="button">Copy</button></pre> <h3 id="多云私有化部署配置" class="tsd-anchor-link">多云/私有化部署配置<a href="#多云私有化部署配置" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>将数据中的 <code>custom-oss-public.ljcdn.com</code> 域名映射到对应的资源专用 OSS 域名。</p> <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">mappings:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">&quot;custom-oss-public.ljcdn.com&quot;</span><span class="hl-6">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-9">&quot;tencentCloud&quot;</span><span class="hl-1">, </span><span class="hl-8">// 指定使用腾讯云图片处理协议</span><br/><span class="hl-1"> </span><span class="hl-6">pano:</span><span class="hl-1"> [</span><span class="hl-9">&quot;custom-oss-image-1.com&quot;</span><span class="hl-1">, </span><span class="hl-9">&quot;custom-oss-image-2.com&quot;</span><span class="hl-1">], </span><span class="hl-8">// 双域名负载均衡</span><br/><span class="hl-1"> </span><span class="hl-6">tile:</span><span class="hl-1"> [</span><span class="hl-9">&quot;custom-oss-tile-1.com&quot;</span><span class="hl-1">, </span><span class="hl-9">&quot;custom-oss-tile-2.com&quot;</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">model:</span><span class="hl-1"> [</span><span class="hl-9">&quot;custom-oss-model-1.com&quot;</span><span class="hl-1">, </span><span class="hl-9">&quot;custom-oss-model-2.com&quot;</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">texture:</span><span class="hl-1"> [</span><span class="hl-9">&quot;custom-oss-image-3.com&quot;</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">default:</span><span class="hl-1"> [</span><span class="hl-9">&quot;custom-oss-image-4.com&quot;</span><span class="hl-1">]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span> </code><button type="button">Copy</button></pre> <h3 id="内部调用:获取全景图局部裁剪" class="tsd-anchor-link">内部调用:获取全景图局部裁剪<a href="#内部调用:获取全景图局部裁剪" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>使用 SDK 提供的 <code>defaultImageURLTransform</code> 工具函数(通常导出为 <code>defaultImageURLTransform</code>,可重命名为 <code>imageURL</code>),结合 <code>cut</code> 参数获取全景图特定区域(例如获取前方图片的中心 512x512 区域)。</p> <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">defaultImageURLTransform</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">imageURL</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">originalUrl</span><span class="hl-1"> = </span><span class="hl-9">&quot;https://vr-public.realsee-cdn.com/.../pano_f.jpg&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">cutUrl</span><span class="hl-1"> = </span><span class="hl-5">imageURL</span><span class="hl-1">(</span><span class="hl-6">originalUrl</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">cut:</span><span class="hl-1"> [</span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">], </span><span class="hl-8">// x, y, width, height</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">&quot;webp&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">quality:</span><span class="hl-1"> </span><span class="hl-11">80</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-6">cutUrl</span><span class="hl-1">);</span><br/><span class="hl-8">// 输出示例: https://vr-image-4.realsee-cdn.com/.../pano_f.jpg?imageMogr2/format/webp/cut/512x512x256x256/quality/80</span> </code><button type="button">Copy</button></pre> <h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <ul> <li><a href="features_pano-tile.html">Pano Tile</a>: 全景图瓦片加载策略与 WorkTile 数据结构说明。</li> </ul> <hr> <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">图片配置</span><span class="hl-1">, </span><span class="hl-2">图片格式</span><span class="hl-1">, </span><span class="hl-2">域名映射</span><span class="hl-1">, </span><span class="hl-2">多云部署</span><span class="hl-1">, </span><span class="hl-2">私有化</span><span class="hl-1">, </span><span class="hl-2">图片质量</span><span class="hl-1">, </span><span class="hl-2">流量优化</span><span class="hl-1">, </span><span class="hl-2">imageOptions</span><span class="hl-1">, </span><span class="hl-2">configuration</span><span class="hl-1">, </span><span class="hl-2">optimization</span><span class="hl-1">, </span><span class="hl-2">cdn</span><span class="hl-1">, </span><span class="hl-2">private-deployment</span><span class="hl-1">, </span><span class="hl-2">avif</span><span class="hl-1">, </span><span class="hl-2">webp</span><span class="hl-1">]</span> </code><button type="button">Copy</button></pre> </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#imageoptions-图片配置"><span>Image<wbr/>Options (图片配置)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><ul><li><a href="#imageoptions"><span>Image<wbr/>Options</span></a></li><li><a href="#imageurlmappings"><span>Image<wbr/>URL<wbr/>Mappings</span></a></li></ul></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#cdn-mapping-多云部署与私有化"><span>CDN <wbr/>Mapping (多云部署与私有化)</span></a></li><li><a href="#format-adaptation-浏览器兼容性"><span>Format <wbr/>Adaptation (浏览器兼容性)</span></a></li><li><a href="#tile-cutting-内部瓦片裁剪"><span>Tile <wbr/>Cutting (内部瓦片裁剪)</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#基础优化配置-推荐"><span>基础优化配置 (推荐)</span></a></li><li><a href="#多云私有化部署配置"><span>多云/私有化部署配置</span></a></li><li><a href="#内部调用:获取全景图局部裁剪"><span>内部调用:获取全景图局部裁剪</span></a></li></ul></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>