photo sphere viewer使用图像数据替代路径来生成全景图

最新推荐文章于 2024-08-26 09:08:24 发布

anyangyu0343

最新推荐文章于 2024-08-26 09:08:24 发布

阅读量525

点赞数

原文链接：http://www.cnblogs.com/lgh344902118/p/7459098.html

版权

photo sphere viewer是一个js库，用来将全景图片生成360度的全景图像，但是其要求传入的是个路径。如何使用数据代替路径生成图像。

我采用的方法是用img标签生成图像，然后调用img.src来替换path

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Photo Sphere Viewer</title>
        <meta name="viewport" content="initial-scale=1.0" />
        <script src="{{ url_for('static', filename='three.min.js')}}"></script>
        <script src="{{ url_for('static', filename='photo-sphere-viewer.min.js')}}"></script>
        <style>
            html, body {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #container {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <img id="image" src="data:image/jpeg;base64,{{ image }}" alt="test">
        <script>
            var div = document.getElementById('container');
            var img = document.getElementById('image');
            var PSV = new PhotoSphereViewer({
                    panorama: img.src,
                    container: div,
                    time_anim: 3000,
                    navbar: true,
                    navbar_style: {
                        backgroundColor: 'rgba(58, 67, 77, 0.7)'
                    },
                });
        </script>
    </body>

</html>