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. shell整数加法

    http://blog.csdn.net/ll_0520/article/details/5959577 #plus #!/bin/sh let a=$1+$2 b=$[$1+$2] ((c=$1+$ ...

  2. try_module_get和module_put【转】

    转自:http://blog.csdn.net/adaptiver/article/details/7000617 转自:http://apps.hi.baidu.com/share/detail/4 ...

  3. 【洛谷P1343】地震逃生

    一道傻吊的网络流题,wori我写的读入优化怎么老T? 远离读入优化报平安? #include<bits/stdc++.h> #define N 4005 #define inf 10000 ...

  4. [ 总结 ] Linux下两种常用的双网卡绑定

    1. mode=0 (round-robin) 链路聚合:将两个或者更多数据信道结合成一个单一的信道,该信道以一个更高带宽的逻辑链路出现,链路聚合一般用来连接一个或多个带宽需求量大的设备,链路聚合是指 ...

  5. BZOJ 3038 上帝造题的七分钟二

    无题目 但是百度会发现题目和3211基本一致 所以看上一篇博文的上一篇博文呢

  6. SSH Secure Shell 无法登录：server responded "algorithm negotiation failed”

    SSH Secure Shell Client 连接 ubuntu系统报错 修改ssh的配置文件 /etc/ssh/sshd_config在配置文件中添加: Ciphers aes128-cbc,ae ...

  7. Delphi New,Getmem,ReallocMem联系与区别

    来自:http://www.cnblogs.com/jsrgren/archive/2011/10/31/2270353.html ---------------------------------- ...

  8. python高阶函数，map，filter，reduce，ord，以及lambda表达式

    为什么我突然扯出这么几个函数,是因为我今天在看流畅的python这本书的时候,里面有一部分内容看的有点懵逼. >>> symbols = '$¢£¥€¤' >>> ...

  9. （十四）基于GTID的主从复制

    (1)GTID主从复制 1)环境介绍 /etc/redhat-release CentOS Linux release 7.3.1611 (Core) MySQL版本:5.7 mysql> se ...

  10. [转载]JQ 选择器大全[<font color=red>强记忆</font>]

    一.基本选择器  选择器  描 述  返回  示例  #id  根据给定id匹配一个元素  单个元素  $("#test") 选取id为test的元素  .class  根据给定类 ...