全景图的获取以及HTML页面显示全景图

最新推荐文章于 2024-07-06 16:47:02 发布

m0_60404402

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量3.9k

点赞数 7

本文链接：https://blog.csdn.net/m0_60404402/article/details/125311262

版权

前言

随着前端技术的不断发展，图像的展示越来越重要，本文就介绍了全景图获取与显示的基础内容。

一、全景图片获取方法

1. 使用全景相机拍摄

拍摄的图片在2维显示下会变形，但是不影响全景图的显示

2.手机app拍摄

一般是通过拍摄多张图片通过算法合成，无法获得完整的全景图，全景图展示的时候缺失的部分无法显示。拍摄全景图的app有很多（部分手机自带，但是不一定能达到要求，因为全景图片必须首尾相连），在这里介绍一款《广角相机》app，感觉并不是很稳定，有更好推荐的童鞋可以评论区补充，具体操作步骤如下：

打开相机，水平拍摄20张图片，注意每张照片的衔接，下一张图片尽量包含上一张图片的30%，方便算法拼接，保证正确度
点击合成图片，最终效果如下

3.使用爬虫爬取

进入百度地图界面（网址https://map.baidu.com/），选择街景地图，进入街景

2.复制panoid的值

3. 将复制的值粘贴到写好的代码（后面会给出）

4. 运行代码，当前目录下名为output.jpg的照片即为全景图，生成的img_frag目录为图片碎片目录

5. 爬虫代码

import requests
import base64
import numpy as np
from PIL import Image
import os
from tqdm import tqdm

# panoid 这个值决定爬取的位置
panoid = "09001900011610281321007255F"


# 全局图网址
url = "https://mapsv1.bdimg.com/?qt=pdata&sid="+ panoid +"&pos={}_{}&z=4"

# 请求头
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36 Edg/102.0.1245.39"
}

def base64_to_img(bstr, file_path):   # base64编码成图片
    imgdata = base64.b64decode(bstr)
    file = open(file_path, 'wb')
    file.write(imgdata)
    file.close()

def image_stitch():
    imgdict = {}
    for i in os.listdir("./img_frag"):
        if i.split(".jpg")[0].split("_")[0] not in imgdict.keys():
            imgdict[i.split(".jpg")[0].split("_")[0]] = []

        for j in imgdict.keys():
            if i.split(".jpg")[0].split("_")[0] == j:
                imgdict[j].append(i)
    print(imgdict)
    isfirst = 0
    imglist = []
    tempimg = Image.Image()
    for i in imgdict.keys():
        for j in imgdict[i]:
            if isfirst == 0:
                tempimg = Image.open('./img_frag/' + j)
                isfirst = 1
            else:
                img = Image.open('./img_frag/' + j)
                tempim = np.array(tempimg)  # 转化为ndarray对象
                im = np.array(img)  # 转化为ndarray对象
                imstitch = np.concatenate((tempim, im), axis=1)  # 横向拼接
                tempimg = Image.fromarray(imstitch)

        imglist.append(tempimg)
        tempimg = Image.Image()
        isfirst = 0
    print(imglist)

    saveim = imglist[0]
    for i in imglist[1:]:
        saveim = np.concatenate((saveim, i), axis=0)  # 纵向拼接

    saveimage = Image.fromarray(saveim)
    saveimage.save("output.jpg")
    print("Image stitching completed!")

def img_spide():
    # 该平台全景图片被分割为32张，全部爬取后保存
    pbar = tqdm(total=32)   # 进度条
    for i in range(0,4):
        for j in range(0,8):
            response = requests.get(url=url.format(i,j), headers=headers)
            with open('./img_frag/{}_{}.jpg'.format(i,j),'wb') as f:
                f.write(response.content)
                pbar.update(1)
    print("image collect successful!")

if __name__ == '__main__':
    if not os.path.exists("./img_frag"):
        os.mkdir("img_frag")
    img_spide()
    image_stitch()

二、全景图显示

本文全景图展示基于开源项目Photo Sphere Viewer。

Photo Sphere Viewer是一个JavaScript库，允许您在任何网页上显示360×180度的全景图。全景图必须使用等矩形投影，可以使用Android 4.2 Jelly Bean自带的拍照模式Photo Sphere拍摄。

Photo Sphere Viewer使用了Three.js库，所以你的访问者不需要任何东西，除了一个兼容canvas或者更好的WebGL的浏览器。

Git地址：https://gitee.com/mirrors_JeremyHeleine/Photo-Sphere-Viewer

Photo Sphere Viewer中自带案例，使用者无需具备编程知识也可以简单使用，简单使用步骤如下：

下载项目源代码

2. 开案例test.html，并打开上述获取到的全景图

3. 即可进行全景图的浏览

4. 对比全景相机拍摄（爬虫爬取的数据也是全景相机拍的）和手机拍摄，手机拍摄的照片，天空部分有可能会变形或者显示成黑色

全景相机拍摄的效果明显更好

上述的案例是打开本地的全景图片，但在实际开发过程中，需要将该功能加入自己的web应用中，就需要对代码修改

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Photo Sphere Viewer</title>
		<meta name="viewport" content="initial-scale=1.0" />
		<!-- 引入相应的js文件 -->
		<script src="../three.min.js"></script>
		<script src="../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 -->
		<div id="container"></div>
		<script>
			var div = document.getElementById('container');
			// 初始化全景图显示对象
			var PSV = new PhotoSphereViewer({
					// 全景图地址，这里需要特别注意，需要使用网络上的图片，如果使用本地的文件，会报CORS跨域请求错误，当然如果你的网络Web应用已经部署在服务器上，可以忽略这个问题
					panorama: 'http://tassedecafe.org/wp-content/uploads/2013/01/parc-saint-pierre-amiens.jpg',
					container: div,
					time_anim: 3000,
					navbar: true,
					navbar_style: {
						backgroundColor: 'rgba(58, 67, 77, 0.7)'
					},
				});
		</script>
	</body>

</html>

其中需要注意的是，这个例子不能本地的文件，会报CORS跨域请求错误，当然如果你的网络Web应用已经部署在服务器上，可以忽略这个问题