photo sphere viewer使用图像数据替代路径来生成全景图
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使用图像数据替代路径来生成全景图的更多相关文章
- Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的 该js插件可以360度旋转查看全景图,也可以上 ...
- postgresql pgsql最新版安装指南及数据存储路径更改及主从配置
postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...
- [转载]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 ...
- VS2017编译GDAL(64bit)+解决C#读取Shp数据中文路径的问题
编译GDAL过程比较繁琐,查阅了网上相关资料,同时通过实践,完成GDAL的编译,同时解决了SHP数据中文路径及中文字段乱码的问题,本文以“gdal-2.3.2”版本为例阐述整个编译过程. 一.编译准备 ...
- mysql利用yum安装指定数据存放路径
测试环境: Centos6.5.MySQL5.6.28 yum安装具有速度快,便捷关键是不用编译,编译时间太久了! 01.下载mysql https://mirrors.tuna.tsinghua.e ...
- 使用 Python 设置数据的路径
使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...
- 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 ...
- mysql修改数据存储路径报错处理
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'解决?: >>> vim ...
- MiniWord .NET Word模板引擎,藉由Word模板和数据简单、快速生成文件。
Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 介绍 MiniWord .NET Word模板引擎,藉由Word模板和数据简单.快速生 ...
随机推荐
- 使用dd命令克隆整个系统
神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具! 既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...
- shell脚本之while for if 语句和编写计划任务
关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...
- Make recursive
folder structure: Makefile t1/Makefile t1/t1.c t2/Makefile t2/t2.c Makefile SUBDIRS = t1 t2 all: for ...
- Linux设置编译器环境变量
Linux设置编译器环境变量 https://jingyan.baidu.com/article/9f7e7ec0bb22aa6f29155453.html Linux添加环境变量与GCC编译器添加I ...
- SuSE Linux修改网卡配置
http://blog.chinaunix.net/uid-20765159-id-1850854.html SuSE Linux修改网卡配置 2010 SuSE linux ...
- Centos下yum update与yum upgrade的区别
转载来源于:http://www.cnblogs.com/EasonJim/p/9026357.html 说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作! ...
- 用WP Super Cache和七牛为你的WordPress网站加速
众所周知,WordPress一直都是博客建站的首选程序,而现在也有越来越多的企业网站都选择采用WordPress来搭建. WordPress虽好但其过于臃肿且响应速度慢等缺点也为站长们所诟病,目前网上 ...
- zabbix监控web应用
1)web应用监控介绍 使用zabbix自带的web场景可以监控url的状态码,响应时间,url的下载速度,非常的棒 思路:定义模板-->创建应用集--->定义web场景--->定义 ...
- TDD开发案例
前段时间把一个界面框架完成了,今天基于这个框架开发一个小模块,在这里把这个模块设计的全过程记录下来,希望大家讨论并指正. 一.起因 公司交给我一个任务,为测试员写一个手机模拟界面,以方便她们的手机短信 ...
- JVM加载Class文件的机制
1.Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的, 类装载器所做的工作实质是把类文件从硬盘读取到内存中 2.java中的类大致分为三种: 1.系统 ...