实现图像预览功能

assets/ViewerJsAsset.php

@@ -10,4 +10,7 @@ class ViewerJsAsset extends AssetBundle
     public $js = [
         'viewer.min.js',
     ];
+    public $css = [
+        'viewer.min.css'
+    ];
 }

views/home/index.php

@@ -97,7 +97,7 @@ $this->registerCssFile('@web/css/home_style.css');
             <?php endif; ?>
         </ol>
     </nav>
-
+    <img id="hidden-image" style="display: none;" alt="" src="" loading=lazy>
     <table class="table table-hover" id="drop-area">
         <thead class="table-light">
         <tr>
@@ -140,7 +140,12 @@ $this->registerCssFile('@web/css/home_style.css');
                 <?php else: ?> <!-- 如果是文件 -->
                     <td>
                         <?= Html::tag('i', '', ['class' => $item['type'] . ' file_icon']) ?>
+                        <?php if ($item['type'] === 'fa-regular fa-file-image'): ?>
+                            <!-- 如果是图像文件，添加一个点击事件来预览图像 -->
+                            <?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
+                        <?php else: ?>
                             <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
+                        <?php endif; ?>
                     </td>
                     <td class="file_info">
                         <?= date('Y-m-d H:i:s', $item['lastModified']) ?>

web/js/home_script.js

@@ -391,8 +391,34 @@ function updateButtons() {
     $('.batch-delete-btn').toggle(count >= 1);
 }
 
-// 在页面加载时调用updateButtons函数
-$(document).ready(updateButtons);
-
 // 当checkbox的状态改变时，调用updateButtons函数
 $(document).on('change', '.select-item', updateButtons);
+
+$(document).ready(function() {
+    updateButtons();
+});
+
+// image preview
+function previewImage(element, event) {
+    event.preventDefault(); // 阻止默认的点击事件
+    var hiddenImage = document.getElementById('hidden-image');
+    hiddenImage.src = element.href; // 设置图像的URL
+
+    // 创建一个新的 Viewer.js 实例
+    var viewer = new Viewer(hiddenImage, {
+        toolbar: {
+            zoomIn: 1,
+            zoomOut: 1,
+            oneToOne: 1,
+            reset: 1,
+            rotateLeft: 1,
+            rotateRight: 1,
+            flipHorizontal: 1,
+            flipVertical: 1,
+        },
+        hidden: function() {
+            viewer.destroy();
+        }
+    });
+    viewer.show();
+}