feat: 全景图预览器

libmw · libmw · commit 89d2c2c8f043 · 2022-08-11T11:20:29.000+08:00
diff --git a/_posts/2022-08-11-para-viewer.md b/_posts/2022-08-11-para-viewer.md
@@ -0,0 +1,27 @@
+---
+  layout: pure
+  title: 全景浏览器-拖入全景图预览
+---
+
+<link rel="stylesheet" href="/resource/2022/pannellum.css"/>
+
+<style>
+
+body,html{
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  
+}
+#panorama {
+  width: 100%;
+  height: 100%;
+}
+div.pnlm-tooltip span{
+  visibility:visible;
+}
+</style>
+<script src="/resource/2022/pannellum.js"></script>
+<link rel="stylesheet" href="/resource/2022/pannellum.css"/>
+<div id="panorama"></div>
+<script src="/resource/2022/0811_para_viewer.js"></script>
diff --git a/resource/2022/0811_para_viewer.js b/resource/2022/0811_para_viewer.js
@@ -0,0 +1,24 @@
+let paraViewer;
+const dropTarget = document.getElementById("panorama");
+dropTarget.addEventListener("dragover", (event) => {
+  // prevent default to allow drop
+  event.preventDefault();
+});
+dropTarget.addEventListener("drop", (event) => {
+  event.preventDefault();
+  console.log("event: ", event);
+  const file = event.dataTransfer?.files[0];
+  if(file){
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      paraViewer && paraViewer.destroy()
+      paraViewer = pannellum.viewer("panorama", {
+        type: "equirectangular",
+        panorama: e.target.result,
+        autoLoad: true,
+        pitch: 10,
+      });
+    }
+    reader.readAsDataURL(file);
+  }
+});
