使用KrpanoToolJS在浏览器切图的实例详解_javascript技巧_

一、功能介绍

在浏览器中将全景图转为立方体图、多层级瓦片图

备注：

• 切图的逻辑、缩略图、预览图均以krpano为标准，如果是使用krpano来开发全景的，可以直接使用，暂时未开发自定义切图的参数，后续可能会开放。
• 目前仅支持jpeg/jpg，20000x10000分辨率以内的图片，当然这已经是覆盖了80%的使用场景了
• 切图速度快于krpano命令行工具
• 如果需要更高的要求还是可以使用krpano工具，也可以混着使用

如下功能：

• 生成立方体图片（6个面）
• 生成多分辨率瓦片图（层级根据图片分辨率自动调节）
• 生成场景预览图preview.jpg
• 生成场景缩略图thumb.jpg
• 生成krpano代码：场景代码、立方体image节点代码、多分辨率image节点代码（包含简写和完整两种写法）
• 生成的图片和场景，均无水印

二、如何使用

安装依赖

npm i @krpano/js-tools 

切图，示例：在vue中的使用：

切图的返回值

// result对象 interface IConvertPanoResult { dirName: string; // 生成根目录文件夹名称 content: Blob; // 场景图片、缩略图、预览图 的Blob文件，可以用于上传到后台或者下载到本地 duration: string | number; // 单次切图时长 code: { // 代码 scene: string; // 整个场景的代码 cubeImage: string; // 立方体切图image节点的代码 tileImage: string; // 多分辨率切图image节点的代码 shortTileImage: string; // (简写)多分辨率切图image节点的代码 }; }

切图方法

// 生成立方体图（6张）、缩略图、预览图 makeCube(file: File): Promise; // 生成多分辨率瓦片图、缩略图、预览图 makeTiles(file: File): Promise; // 同时生成立方体图、多分辨率瓦片图 makeCubeAndTiles(file: File): Promise;

到此这篇关于使用KrpanoToolJS在浏览器切图的实例详解的文章就介绍到这了,更多相关KrpanoToolJS浏览器切图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！