创建新仓库

2025-07-03 17:39:09 +08:00
commit c781d38c0c
12944 changed files with 807291 additions and 0 deletions
--- a/static/showPicture.html
+++ b/static/showPicture.html
@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./Vue/index.css">
+    <link rel="stylesheet" href="./Vue/w-e-text.css">
+    <script src="./Vue/vue.js"></script>
+    <script src="./Vue/index.js"></script>
+    <link href="./viewerJs/dist/viewer.css" rel="stylesheet">
+    <script src="./viewerJs/dist/viewer.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="pictureHtml" style="width: 100%;height: 100%;">
+        <img :src="url" id="imgShow" :alt="url" title="图片预览">
+    </div>
+</body>
+<script>
+    let viewer = null
+    function close() {
+        console.log('图片关闭被调用了', viewer);
+        viewer.destroy()
+    }
+    new Vue({
+        el: '#pictureHtml',
+        data() {
+            return {
+                url: '',
+            }
+        },
+        methods: {
+            setImgTools() {
+                console.log('重新渲染', 123);
+                let img = document.getElementById('imgShow')
+                if (!img) {
+                    return
+                }
+                img.onload = () => {
+                    viewer = new Viewer(img, {
+                        toolbar: {
+                            zoomIn: 4,
+                            zoomOut: 4,
+                            oneToOne: false,
+                            reset: false,
+                            prev: false,
+                            play: {
+                                show: 4,
+                                size: 'large',
+                            },
+                            next: false,
+                            rotateLeft: false,
+                            rotateRight: false,
+                            flipHorizontal: 4,
+                            flipVertical: 4,
+                        },
+                        zoomRatio: 0.5
+                    })
+                }
+            }
+        },
+        mounted() {
+            window.addEventListener('message', (data) => {
+                this.url = data.data
+                console.error('图片地址', this.url);
+            })
+            this.$nextTick(() => {
+                this.setImgTools()
+            })
+        }
+    })
+
+</script>
+
+</html>