mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
174 lines
4.8 KiB
HTML
174 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Viewer</title>
|
||
<link href="./viewer.min.css" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: #1a1a1a;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#image-container {
|
||
display: none;
|
||
}
|
||
|
||
.viewer-close {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="image-container"></div>
|
||
|
||
<script src="./viewer.min.js"></script>
|
||
<script>
|
||
const {ipcRenderer} = require('electron');
|
||
let viewer = null;
|
||
|
||
const thumbnailUrl = (url) => {
|
||
const crops = {
|
||
ratio: 3,
|
||
percentage: '320x0'
|
||
}
|
||
url = `${url}`
|
||
.replace(/_thumb\.(png|jpg|jpeg)$/, '')
|
||
.replace(/\/crop\/([^\/]+)$/, '')
|
||
return url + "/crop/" + Object.keys(crops).map(key => {
|
||
return `${key}:${crops[key]}`
|
||
}).join(",")
|
||
}
|
||
|
||
// 标题翻译
|
||
const titleTranslations = {
|
||
zh: '图片查看器',
|
||
'zh-CHT': '圖片查看器',
|
||
en: 'Image Viewer',
|
||
ko: '이미지 뷰어',
|
||
ja: '画像ビューア',
|
||
de: 'Bildbetrachter',
|
||
fr: 'Visionneuse d\'images',
|
||
id: 'Penampil Gambar',
|
||
ru: 'Просмотр изображений'
|
||
};
|
||
|
||
// 接收主进程发送的图片数据
|
||
ipcRenderer.on('load-media', (event, args) => {
|
||
const container = document.getElementById('image-container');
|
||
container.innerHTML = ''; // 清空容器
|
||
|
||
// 更新网页标题
|
||
const currentLang = args.lang || 'en';
|
||
document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];
|
||
|
||
// 创建图片元素
|
||
args.images.forEach(src => {
|
||
const img = document.createElement('img');
|
||
img.src = thumbnailUrl(src);
|
||
img.setAttribute('data-original', src);
|
||
container.appendChild(img);
|
||
});
|
||
|
||
// 如果已存在查看器，则销毁
|
||
if (viewer) {
|
||
viewer.destroy();
|
||
}
|
||
|
||
// 初始化 ViewerJS
|
||
viewer = new Viewer(container, {
|
||
// 是否使用内联模式显示
|
||
// false: 以模态框形式显示（推荐，支持完整键盘快捷键）
|
||
// true: 直接在页面中显示
|
||
inline: false,
|
||
|
||
// 是否显示图片标题
|
||
title: false,
|
||
|
||
// 工具栏按钮配置
|
||
toolbar: {
|
||
zoomIn: true, // 放大按钮
|
||
zoomOut: true, // 缩小按钮
|
||
oneToOne: true, // 1:1 原始尺寸按钮
|
||
reset: true, // 重置按钮
|
||
prev: true, // 上一张图片按钮
|
||
next: true, // 下一张图片按钮
|
||
rotateLeft: true, // 向左旋转按钮
|
||
rotateRight: true, // 向右旋转按钮
|
||
flipHorizontal: true, // 水平翻转按钮
|
||
flipVertical: true, // 垂直翻转按钮
|
||
},
|
||
|
||
// 是否显示缩略图导航栏
|
||
navbar: 2,
|
||
|
||
// 是否显示工具提示
|
||
tooltip: true,
|
||
|
||
// 是否允许拖动图片
|
||
movable: true,
|
||
|
||
// 是否允许缩放图片
|
||
zoomable: true,
|
||
|
||
// 是否允许旋转图片
|
||
rotatable: true,
|
||
|
||
// 是否允许翻转图片
|
||
scalable: true,
|
||
|
||
// 是否启用过渡动画效果
|
||
transition: false,
|
||
|
||
// 是否启用全屏模式
|
||
fullscreen: false,
|
||
|
||
// 是否启用键盘快捷键
|
||
// 支持的快捷键：
|
||
// ← / →：上一张/下一张图片
|
||
// ↑ / ↓：放大/缩小
|
||
// Ctrl + ← / Ctrl + →：向左/向右旋转
|
||
// Space：切换1:1模式
|
||
// Esc：关闭查看器
|
||
keyboard: true,
|
||
|
||
// 背景遮罩层设置
|
||
// 'static'：点击背景不会关闭查看器
|
||
backdrop: 'static',
|
||
|
||
// 使用url属性来加载原始图片
|
||
url: 'data-original',
|
||
|
||
// 初始显示第几张图片（从0开始计数）
|
||
initialViewIndex: args.currentIndex || 0,
|
||
|
||
// 查看器隐藏时的回调函数
|
||
hidden() {
|
||
window.close();
|
||
}
|
||
});
|
||
|
||
// 立即显示查看器
|
||
viewer.show();
|
||
|
||
// 监听键盘事件
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !document.fullscreenElement) {
|
||
window.close();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|