65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Django 和 A-Frame 的 360 度图像网页图库

Cloudster
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2019年7月3日

CPOL

4分钟阅读

viewsIcon

14562

使用 Django、Bootstrap、Python、A-Frame 和 PostgreSQL 部署 360 度图片画廊

引言

Instagram 和 Flickr 等现有图片分享网站无法提供引人注目的 360 度图片体验。许多网站（如 Instagram）甚至不支持 360 度图片格式，尽管 Facebook 等网站可以显示 360 度图片，但许多人认为体验很差，图片分辨率低且视口小。为了测试不同图片分辨率、文件大小、视口大小、头部跟踪、文本和图片分层以及元数据共享等想法，我正在与一个在线社区合作，使用 Django 和 Bootstrap 展示 RICOH THETA 图片并分享 360 度摄影技术。

该网站的代码可在 GitHub 上找到。实验测试平台可在 https://gallery.theta360.guide (此处) 访问。

该网站不是用于托管图片的生产网站。它是一个测试想法和获取反馈的框架。

得益于 A-Frame，构建该网站非常简单，它处理了所有的 360 度导航和显示。

背景

360 度网站中使用的图片通常比标准图片更大。这是因为观众通过视口只能看到 360 度图片的一小部分。

这是在 Chrome 浏览器窗口中查看的同一张图片。左侧的图片使用 <img src="filename.jpg"> 显示

右侧的图片使用 A-Frame 的 <a-sky src="filename.jpg"> 标签查看。

A-Frame 将图片移动处理推送到浏览器。在一个页面上显示过多的 360 度图片会导致浏览器体验 sluggish。一种策略是将图片列表或网格显示为缩略图。当观众点击缩略图时，图片将显示为 360 度图片。

为了缓解网络延迟，缩略图被调整为 400x200 像素，这会将文件大小从 8MB 减少到约 7KB。

image

RICOH THETA Z1 的典型图片是 8MB 的 JPEG，尺寸为 6,720 像素宽 x 3360 像素高。为了更快地加载全尺寸图片，我们应用了多项技术将图片大小减小到约 1.5MB。

上传图片

目前，注册用户使用未经修改的 Django 界面上传图片以及关于如何拍摄的照片的故事。

尽管该界面是老式的，但它能够完成测试工作。

开发图片网格的布局

该相册基于复制 Bootstrap Album 示例。

image

移动端自适应

得益于 Bootstrap，该相册将自动调整大小，并在移动设备上将列数从 3 列减少到 1 列。

image

image

image

A-Frame

A-Frame 非常易于使用。在 HTML 文件的 <head> 中，添加此内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js" crossorigin="anonymous">
</script>

在 body 中，这是调用图片的区域

        <div id="main-image">
        <a-scene embedded>
          <a-sky src="{{blog.image.url}}"></a-sky>
        </a-scene>
      </div>

CSS 样式

a-scene {
  height: 600px;
  width: 100%;
}
#main-image {
  margin: auto;
}

webp

作为减少图片文件大小工作的一部分，我将图片转换为 webp 格式。

Grid

图片网格是从 Bootstrap Album 示例中复制的。它使用嵌入在 HTML 中的 Python for 循环。每张图片都被调用为一个“作业”。每个作业都有存储在运行在托管服务器上的 PostgreSQL 数据库中的属性。我使用简单的 Django 命令将整个作业数据库传递给 HTML。一旦我可以在 HTML 中访问所有作业，我就使用 Python。此部分不需要 JavaScript。

使用 Django，你可以通过使用 {{ }} 或 {% %} 将 Python 代码直接混合到 HTML 中。

<div class="album py-5 bg-light">
    <div class="container">

    <div class="row">

        {% for job in jobs.all %}
        <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
            <a href="{{job.more_info_url }}">
            <img class="card-img-top" src="{{ job.image.url }}" />
        </a>
            <div class="card-body">
            <h2>
                {{ job.title }}
            </h2>
                <p class="card-text">

                {{ job.summary }}
                <br />
                <strong>
                Photographer:
                </strong>
                {{job.photographer}}
                <br>
                <strong>
                Photo Studio:
                </strong>
                {{job.photo_studio}}
                <br />
                <strong>
                    Camera 
                </strong>
                {{job.camera_model}}
            <br />
                <strong>
                    Technique: 
                </strong>
            {{ job.technique }}
        </div>
        </div>
    </div>
    {% endfor %}
    </div>
</div>

部署 360 度图片画廊

我正在使用一个每月 5 美元的虚拟服务器进行测试，该服务器具有以下规格

  • 1 GB 内存
  • 25 GB 磁盘
  • 1 TB 流量
  • 1 个 CPU
  • Ubuntu 18.04 x64

关注点

相机的原始图片大小和网络延迟让我感到惊讶。当我开发本地运行 Django 的 Linux 工作站上的网站时，我没有注意到这个问题。上传托管的网站后，加载列出所有图片的首页花费了 45 秒。通过减小图片大小，我将其缩短到几秒钟。令我惊讶的是，图片可以显著减小尺寸，而视觉质量的损失很小。如果您有关于在 Django 中处理大图片的建议，请告诉我们。有一个关于此主题的讨论 在此。

为了评估减小图片质量对艺术体验的影响，我们创建了 12 张尺寸相同的 6,720x3,360 像素图片，但应用了不同的有损压缩设置。您可以亲自评估质量变化 在此。

此技术遇到的一个问题是图片会丢失元数据。为了解决这个问题，我计划从原始图片中提取元数据。选择最佳质量是一个相对的决定。如果您有意见，我很想听听。

历史

  • 2019 年 7 月 3 日：初始版本
  • 2019 年 7 月 3 日晚上：更新了图片有损压缩测试示例
© . All rights reserved.