备注:
尚义网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联从2013年开始到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
- 切图的逻辑、缩略图、预览图均以krpano为标准,如果是使用krpano来开发全景的,可以直接使用,暂时未开发自定义切图的参数,后续可能会开放。
- 目前仅支持jpeg/jpg,x分辨率以内的图片,当然这已经是覆盖了80%的使用场景了
- 切图速度快于krpano命令行工具
- 如果需要更高的要求还是可以使用krpano工具,也可以混着使用
如下功能:
npm i @krpano/js-tools
<template>
<input type="file" name="test" @change="onFileChange" accept="image/jpeg">
</template>
<script>
// (可选)用于下载文件
import FileSaver from 'file-saver'
// 导入
import KrpanoToolJS from '@krpano/js-tools'
export default {
methods: {
onFileChange(e) {
const file = e.target.files[0]
if (!file) return
const krpanoTool = new KrpanoToolJS()
krpanoTool.makeTiles(file).then(result => {
// result 的具体值看下面介绍
// 可选,可以使用FileSaver,把内容下载下来
FileSaver.saveAs(result.content)
})
},
}
}
</script>
// 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<IConvertPanoResult>;
// 生成多分辨率瓦片图、缩略图、预览图
makeTiles(file: File): Promise<IConvertPanoResult>;
// 同时生成立方体图、多分辨率瓦片图
makeCubeAndTiles(file: File): Promise<IConvertPanoResult>;
分享名称:如何使用KrpanoToolJS在浏览器切图
标题网址:https://www.cdcxhl.com/article34/dsojipe.html
成都网站建设公司_创新互联,为您提供企业建站、搜索引擎优化、Google、网站内链、企业网站制作、商城网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联