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

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>Photo Sphere Viewer</title>
  7.         <meta name="viewport" content="initial-scale=1.0" />
  8.         <script src="{{ url_for('static', filename='three.min.js')}}"></script>
  9.         <script src="{{ url_for('static', filename='photo-sphere-viewer.min.js')}}"></script>
  10.         <style>
  11.             html, body {
  12.                 margin: 0;
  13.                 width: 100%;
  14.                 height: 100%;
  15.                 overflow: hidden;
  16.             }
  17.  
  18.             #container {
  19.                 width: 100%;
  20.                 height: 100%;
  21.             }
  22.         </style>
  23.     </head>
  24.  
  25.     <body>
  26.         <div id="container"></div>
  27.         <img id="image" src="data:image/jpeg;base64,{{ image }}" alt="test">
  28.         <script>
  29.             var div = document.getElementById('container');
  30.             var img = document.getElementById('image');
  31.             var PSV = new PhotoSphereViewer({
  32.                     panorama: img.src,
  33.                     container: div,
  34.                     time_anim: 3000,
  35.                     navbar: true,
  36.                     navbar_style: {
  37.                         backgroundColor: 'rgba(58, 67, 77, 0.7)'
  38.                     },
  39.                 });
  40.         </script>
  41.     </body>
  42.  
  43. </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. 使用dd命令克隆整个系统

    神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具!          既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...

  2. shell脚本之while for if 语句和编写计划任务

    关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...

  3. Make recursive

    folder structure: Makefile t1/Makefile t1/t1.c t2/Makefile t2/t2.c Makefile SUBDIRS = t1 t2 all: for ...

  4. Linux设置编译器环境变量

    Linux设置编译器环境变量 https://jingyan.baidu.com/article/9f7e7ec0bb22aa6f29155453.html Linux添加环境变量与GCC编译器添加I ...

  5. SuSE Linux修改网卡配置

    http://blog.chinaunix.net/uid-20765159-id-1850854.html SuSE Linux修改网卡配置             2010 SuSE linux ...

  6. Centos下yum update与yum upgrade的区别

    转载来源于:http://www.cnblogs.com/EasonJim/p/9026357.html 说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作! ...

  7. 用WP Super Cache和七牛为你的WordPress网站加速

    众所周知,WordPress一直都是博客建站的首选程序,而现在也有越来越多的企业网站都选择采用WordPress来搭建. WordPress虽好但其过于臃肿且响应速度慢等缺点也为站长们所诟病,目前网上 ...

  8. zabbix监控web应用

    1)web应用监控介绍 使用zabbix自带的web场景可以监控url的状态码,响应时间,url的下载速度,非常的棒 思路:定义模板-->创建应用集--->定义web场景--->定义 ...

  9. TDD开发案例

    前段时间把一个界面框架完成了,今天基于这个框架开发一个小模块,在这里把这个模块设计的全过程记录下来,希望大家讨论并指正. 一.起因 公司交给我一个任务,为测试员写一个手机模拟界面,以方便她们的手机短信 ...

  10. JVM加载Class文件的机制

    1.Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的, 类装载器所做的工作实质是把类文件从硬盘读取到内存中 2.java中的类大致分为三种:     1.系统 ...