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. [Leetcode Week9]Minimum Path Sum

    Minimum Path Sum 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/minimum-path-sum/description/ Descr ...

  2. HDU1503(LCS,记录路径）

    Advanced Fruits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. python学习笔记 可变参数关键字参数**kw相关学习

    在Python中可以定义可变参数,顾名思义,可变参数就是传入参数是可变的.可以是任意个,以一个简单的数学编程为例,计算 sum = a * a + b * b + .....z * z 函数定义可以如 ...

  4. Launcher3自定义壁纸旋转后拉伸无法恢复

    MTK8382/8121平台. 描述:将自定义图片设置成壁纸后,横屏显示时,旋转为竖屏,图片由于分辨率过小,会拉伸:再旋转为横屏,拉伸不恢复. 这两天正在解这个问题,研究了很久,走了不少弯路,最后发现 ...

  5. 【C++】const、volatile不能修饰没有this指针的成员函数

    一般所有的成员函数都只有一个复本,当不同的对象调用成员函数时,为了区分是哪个成员在调用,会传入this指针. 当调用有const.volatile修饰的成员函数时,会相应的传入一个const.vola ...

  6. MySQL 多列索引优化小记

    MySQL 5.6.30 问题背景 由于爬虫抓取的数据不断增多,这两天在不断对数据库以及查询语句进行优化,其中一个表结构如下: CREATE TABLE `newspaper_article` ( ` ...

  7. hdu 5167(dfs)

    Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  8. 如何在Android Studio中创建jniLib和asset文件夹 2

    1.创建asset文件夹 如图进行操作 2.创建jniLib文件夹 —打开app下面的gradle文件(不是project的gradle) —在gradle文件的Android标签里面添加 sourc ...

  9. HDU 5695 Gym Class && 百度之星 初赛 1006

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5695 本文链接:http://www.cnblogs.com/Ash-ly/p/5515234.htm ...

  10. 「kuangbin带你飞」专题十四 数论基础

    layout: post title: 「kuangbin带你飞」专题十四 数论基础 author: "luowentaoaa" catalog: true tags: mathj ...