手动canvas是不可能的，我选择调库hhhh，Photo Sphere Viewer。 看官方示例，还是非常易用的，就是有其他的一些依赖包需要自己找一下。
代码语言：javascript复制<link rel="stylesheet" href="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.css">
<script src="three.js/three.min.js"></script>
<script src="D.js/lib/D.min.js"></script>
<script src="uevent/uevent.min.js"></script>
<script src="doT/doT.min.js"></script>
<script src="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.js"></script>
<script>
var viewer = PhotoSphereViewer({
container: 'container-id',
panorama: 'path/to/panorama.jpg'
});
</script>找到一张全景图素材。
根据官方示例的代码修改一下即可实现全景浏览的功能。
柱状全景图
但我写这篇文章并不只是为了推荐一个库，还有我刚趟过的一个坑——如何实现柱状全景图。
通常，全景图片都是用专门仪器拍摄的几乎360° x 180°照片。但我们日常生活中用手机和相机横向水平拍摄的照片大概只有180° x 90°的样子，如果拍两张拼接起来可以达到约360° x 90°，但还是看不到天和地 这样的全景照片放到上面的例子中是会被纵向严重拉伸的。真正的全景照片的宽高比应该是2:1
这种照片无法制作360°全景，但是可以退而求其次做个柱状全景图。 例如下面这张图↓
开头推荐的库中并没有给出柱状全景图的解决方案，但是我们可以对图像做一点特殊的处理以实现目标效果。
首先，用PS编辑图片，给图片上下各加一段等高的黑色横条，使得整张图片高度达到宽度的一半
我手头这张图片原本宽度接近2W像素，为了不给浏览器造成过大负担我进行了一些缩放。最终加上黑条后整体分辨率为5000*2500。
处理后的图片放进上面的例子中终于不会变形了，但用户还可以控制镜头上下摆动，看到黑色区域不好看，怎么办？
只要调整一下viewer的默认配置latitude_range就行啦 例如↓
代码语言：javascript复制var viewer = PhotoSphereViewer({
container: 'container',
panorama: 'z3d.jpg',
latitude_range: [0, 0], // 禁止上下摆动
mousewheel: false, // 禁止鼠标滚轮缩放
max_fov: 68, // 最大缩放值
min_fov: 67, // 最小缩放值（不能设为68，否则一片漆黑）
default_fov: 68, // 默认缩放值
});这样设置的话，就无法看到照片以外的黑色区域啦，柱状全景图完成！
