平武建站

如何使用KrpanoToolJS在浏览器切图

如何使用KrpanoToolJS在浏览器切图

  1. 框架DEMO
  2. 框架源码地址
  3. 【独辟蹊径】逆推Krpano切图算法，实现在浏览器切多层级瓦片图

一、功能介绍

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

备注：

尚义网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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

如下功能：

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

二、如何使用

安装依赖

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在浏览器切图
本文地址：http://pwwzsj.com/article/dsojipe.html

其他资讯