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>

传入的image是经过base64压缩过的图像的数据

photo sphere viewer使用图像数据替代路径来生成全景图的更多相关文章

  1. Photo Sphere Viewer 全景图

    Photo Sphere Viewer  一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的 该js插件可以360度旋转查看全景图,也可以上 ...

  2. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  3. [转载]ubuntu下如何更改mysql数据存放路径

    http://www.gaojinbo.com/ubuntu%E4%B8%8B%E5%A6%82%E4%BD%95%E6%9B%B4%E6%94%B9mysql%E6%95%B0%E6%8D%AE%E ...

  4. VS2017编译GDAL(64bit)+解决C#读取Shp数据中文路径的问题

    编译GDAL过程比较繁琐,查阅了网上相关资料,同时通过实践,完成GDAL的编译,同时解决了SHP数据中文路径及中文字段乱码的问题,本文以“gdal-2.3.2”版本为例阐述整个编译过程. 一.编译准备 ...

  5. mysql利用yum安装指定数据存放路径

    测试环境: Centos6.5.MySQL5.6.28 yum安装具有速度快,便捷关键是不用编译,编译时间太久了! 01.下载mysql https://mirrors.tuna.tsinghua.e ...

  6. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...

  7. Oracle 11g R2(11.2.0.4) RAC 数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件

    Oracle 11g R2(11.2.0.1) RAC  数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件 oracle 11g R2(11.2.0.4) rac--scan ...

  8. mysql修改数据存储路径报错处理

    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'解决?: >>> vim ...

  9. MiniWord .NET Word模板引擎，藉由Word模板和数据简单、快速生成文件。

    Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 介绍 MiniWord .NET Word模板引擎,藉由Word模板和数据简单.快速生 ...

随机推荐

  1. html——零散知识点

    1.form表单中的button  form表单中,正常应该提交数据的是type="submit"   2. html5的文件读取方法FileReader()     3.inpu ...

  2. oracle创建用户赋予权限，删除权限

    --删除用户及及用户下的所有数据 drop user xxx cascade; --创建用户赋予密码 ; --赋予权限 grant dba to xxx; --删除权限 revoke dba from ...

  3. Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮

    Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:

  4. 几种常用排序算法的python实现

    1:快速排序 思想: 任意选取一个数据(通常选用数组的第一个数)作为关键数据,然后将所有比它小的数都放到它前面,所有比它大的数都放到它后面,这个过程称为一趟快速排序. 一趟快速排序的算法是: 1)设置 ...

  5. python的上下文管理（context）（1）

    本文转载自:http://blog.csdn.net/G_66_hero/article/details/53048540 什么是Python中的上下文管理器 怎么使用上下文管理器 如何创建自己的上下 ...

  6. 自动监控tomcat脚本并且执行重启操作

    #!/bin/sh # func:自动监控tomcat脚本并且执行重启操作 # author:reed # date:// # 定义环境变量 MYPATH=/usr/local/jdk/bin exp ...

  7. jenkins,已令人发指的简发到如此地步了？

    不用tomcat,一条命令.... java -jar jenkins.war

  8. C#实现HTML转图片（网页快照）

    有时候我们需要将网页转成图片,那么可以使用WebBrowser来生成网页快照,废话不多说,代码如下 1.网页快照帮助类(如果是BS或控制台需要引用System.Windows.Forms类库): pu ...

  9. python的垃圾回收机制和析构函数__del__

    析构函数__del__定义:在类里定义,如果不定义,Python 会在后台提供默认析构函数. 析构函数__del__调用: A.使用del 显式的调用析构函数删除对象时:del对象名: class F ...

  10. PHP实现支付宝即时到账功能

    本文实例为大家分享了PHP支付宝即时到账功能的实现代码,供大家参考,具体内容如下 首先需要下载即时到账交易接口,传送门https://doc.open.alipay.com/doc2/detail?t ...