Photo Sphere Viewer 使用以及，截图空白问题

最新推荐文章于 2025-04-17 16:08:17 发布

星良辰寻

最新推荐文章于 2025-04-17 16:08:17 发布

阅读量606

点赞数

分类专栏：一些奇怪的东西 JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/josiecici/article/details/120292181

版权

JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

一些奇怪的东西

5 篇文章

订阅专栏

截图之前先重新渲染一下这里参考的是别人的想法然后从api中找到的 PSV.renderer.render()

  getSection() {
      //全景图截图
      console.log('这是this.$refs.qjt',this.$refs.qjt.PSV.renderer.render());
      let canvas = this.$refs.qjt.$el.getElementsByTagName("canvas")[0];
      let dataURL = canvas.toDataURL("image/png");
      const img = dataURLtoFile(dataURL, "截面.png", "image/png");
      console.log('这是img',img);
    },

截图可成功，效果如下图所示：
在这里插入图片描述
Photo Sphere Viewer 例子：

<head>
  <!-- for optimal display on high DPI devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
</head>

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

<!-- the viewer container must have a defined size -->
<div id="viewer"></div>

<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'http://9.9.9.15/file/ftp_reposity/point_cloud/649e076890664400b5dcf383d846c9df/xx7.jpg',
  size:{
          width: 380,
          height: 400
         },
  });
</script>