Kivicube文档

简体中文

English

主题

拍照和预览 ​

相关参考：Scene API / 相机与拍照

当前 Web 插件提供了拍照能力，既可以使用默认拍照按钮，也可以完全由宿主页面自定义。

默认拍照按钮 ​

默认情况下，Kivicube 会在合适的时机显示拍照按钮：

  • web3d 场景通常较早可见
  • 图像追踪场景通常在 tracked 后才显示

如需隐藏默认按钮：

js
await kivicubeIframePlugin.openKivicubeScene(iframe, {
  sceneId,
  hideTakePhoto: true,
});

使用高级 API 主动拍照 ​

js
iframe.addEventListener('ready', async (event) => {
  const { api } = event.detail;

  const imageUrl = await api.takePhoto();
  console.log(imageUrl);
});

takePhoto() 返回的是一段 data:image/png;base64,... 的图片地址。

拍照结果包含什么 ​

当前实现会：

  1. 先截取 3D 场景画面
  2. 如果是 AR 场景，再取一张摄像头画面
  3. 将两者合成一张最终图片

因此拍照结果通常是“相机画面 + 3D 内容”的合成图。

特殊情况下，照片上还会存在水印。

照片的内容，刚好就是iframe包含的内容。

而照片分辨率，和设备的分辨率、DPR有关，不是固定的值大小。

自定义预览 ​

最简单的宿主层做法是把返回结果直接赋给 <img>：

js
const photo = await api.takePhoto();
previewImg.src = photo;
previewDialog.open = true;

下载图片 ​

js
const photo = await api.takePhoto();
const link = document.createElement('a');
link.href = photo;
link.download = 'kivicube-photo.png';
link.click();

建议的用户体验 ​

比较常见的一套流程是：

  1. 隐藏默认拍照按钮
  2. 宿主层自己放一个品牌化按钮
  3. 点击后调用 api.takePhoto()
  4. 弹出自定义预览层
  5. 提供“保存”“重新拍摄”“分享”三个动作

注意事项 ​

  • 拍照是异步操作，建议加上Loading提示，避免用户连续点击。
  • 如果页面存在普通水印，拍照结果也应存在水印。
  • 建议在真实手机上验证最终成图分辨率和裁切效果。