lq/i-love
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
年糕崽崽
2025-06-17 09:46:57 +08:00
parent 78600b89b7
commit 7c393a3b16
14 changed files with 9317 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/Http/Controllers/ImageController.php Normal file
View File

@@ -0,0 +1,18 @@
<?php
namespace App\Http\Controllers;
use App\Service\ImageService;
class ImageController extends Controller
{
//
public function upload()
{
// 获取post的image参数
$image = request()->file('image');
return new ImageService()->processImage($image);
}
}

8
app/Http/Controllers/PhotoAlbumController.php Normal file
View File

@@ -0,0 +1,8 @@
<?php
namespace App\Http\Controllers;
class PhotoAlbumController extends Controller
{
//
}

15
app/Models/ImagesModel.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class ImagesModel extends Model
{
//
protected $table = 'nl_images';
protected $guarded = [];
public $timestamps = false;
}

20
app/Models/PhotoAlbumModel.php Normal file
View File

@@ -0,0 +1,20 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class PhotoAlbumModel extends Model
{
//
protected $table = 'nl_photo_album';
protected $guarded = [];
public $timestamps = false;
public function photos()
{
return $this->hasMany(ImagesModel::class, 'photo_album_id', 'id');
}
}

188
app/Service/ImageService.php Normal file
View File

@@ -0,0 +1,188 @@
<?php
namespace App\Service;
use App\Models\ImagesModel;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
class ImageService
{
/**
* 处理上传的图片
*
* @param UploadedFile $imageFile
* @return array 包含三个路径的数组
*/
public function processImage($imageFile)
{
// 1. 保存原始图片
$originalPath = $this->storeOriginalImage($imageFile);
// 2. 无损压缩图片
$compressedPath = $this->compressToWebp($originalPath);
// 3. 添加水印
$watermarkedPath = $this->addWatermark($compressedPath);
ImagesModel::create([
'photo_album_id' => 1,
'title' => date('Y-m-d H:i:s'),
'original' => $originalPath,
'compressed' => $compressedPath,
'watermarked' => $watermarkedPath,
'created_at' => time()
]);
return [
'original' => $originalPath,
'compressed' => $compressedPath,
'watermarked' => $watermarkedPath
];
}
/**
* 保存原始图片
*/
protected function storeOriginalImage($imageFile)
{
$path = 'images/original/' . Str::random(40) . '.' . $imageFile->getClientOriginalExtension();
Storage::put($path, file_get_contents($imageFile));
return $path;
}
/**
* 使用WebP格式高效压缩图片
*
* @param string $originalPath 原始图片路径
* @param int $quality WebP压缩质量(1-100)
* @param int|null $maxWidth 最大宽度(可选)
* @param int|null $maxHeight 最大高度(可选)
* @return string 压缩后的图片路径
*/
protected function compressToWebp($originalPath, $quality = 85, $maxWidth = null, $maxHeight = null)
{
// 获取原始图片内容
$imageContent = Storage::get($originalPath);
$image = imagecreatefromstring($imageContent);
// 获取图片信息
$info = getimagesizefromstring($imageContent);
$width = $info[0];
$height = $info[1];
$mime = $info['mime'];
// 调整图片尺寸（如果指定了最大宽高）
if ($maxWidth || $maxHeight) {
// 计算新尺寸，保持宽高比
$originalRatio = $width / $height;
// 如果只指定了一个维度，自动计算另一个
if (!$maxWidth) {
$maxWidth = (int)($maxHeight * $originalRatio);
} elseif (!$maxHeight) {
$maxHeight = (int)($maxWidth / $originalRatio);
}
// 计算最终尺寸（不超过原始尺寸）
$newWidth = min($width, $maxWidth);
$newHeight = min($height, $maxHeight);
// 创建新尺寸的画布
$resizedImage = imagecreatetruecolor($newWidth, $newHeight);
// 保留透明度 (PNG/GIF)
if ($mime == 'image/png' || $mime == 'image/gif') {
imagealphablending($resizedImage, false);
imagesavealpha($resizedImage, true);
$transparent = imagecolorallocatealpha($resizedImage, 255, 255, 255, 127);
imagefilledrectangle($resizedImage, 0, 0, $newWidth, $newHeight, $transparent);
}
// 调整图片大小
imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
// 替换原始图片资源
imagedestroy($image);
$image = $resizedImage;
$width = $newWidth;
$height = $newHeight;
}
// 生成压缩后的WebP图片
$compressedPath = 'images/compressed/' . Str::random(40) . '.webp';
// 保存WebP图片
ob_start();
imagewebp($image, null, $quality);
$compressedContent = ob_get_clean();
Storage::put($compressedPath, $compressedContent);
// 释放内存
imagedestroy($image);
return $compressedPath;
}
/**
* 添加水印
*/
protected function addWatermark($imagePath)
{
$imageContent = Storage::get($imagePath);
$image = imagecreatefromstring($imageContent);
// 获取图片信息
$info = getimagesizefromstring($imageContent);
$width = $info[0];
$height = $info[1];
$mime = $info['mime'];
// 水印文字设置
$text = '@ Li Qi';
$fontSize = 20;
$fontFile = public_path('fonts/arial.ttf'); // 确保字体文件存在
// $fontFile = ''; // 确保字体文件存在
$textColor = imagecolorallocatealpha($image, 255, 255, 255, 50);
// 计算文字位置 (右下角)
$textBox = imagettfbbox($fontSize, 0, $fontFile, $text);
$textWidth = $textBox[2] - $textBox[0];
$textHeight = $textBox[7] - $textBox[1];
$x = $width - $textWidth - 40;
$y = $height - $textHeight - 40;
// 添加文字水印
imagettftext($image, $fontSize, 0, $x, $y, $textColor, $fontFile, $text);
// 生成带水印的路径
$extension = pathinfo($imagePath, PATHINFO_EXTENSION);
$watermarkedPath = 'images/watermarked/' . Str::random(40) . '.' . $extension;
// 保存带水印的图片
ob_start();
switch ($mime) {
case 'image/jpeg':
imagejpeg($image, null, 100);
break;
case 'image/png':
imagepng($image, null, 9);
break;
case 'image/gif':
imagegif($image);
break;
case 'image/webp':
imagewebp($image, null, 100);
break;
}
$watermarkedContent = ob_get_clean();
Storage::put($watermarkedPath, $watermarkedContent);
// 释放内存
imagedestroy($image);
return $watermarkedPath;
}
}

1
bootstrap/app.php
View File

@@ -7,6 +7,7 @@ use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
api: __DIR__. '/../routes/api.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)

6
composer.json
View File

@@ -6,9 +6,11 @@
"keywords": ["laravel", "framework"],
"license": "MIT",
"require": {
"php": "^8.2",
"php": "^8.4",
"intervention/image": "^3.11",
"laravel/framework": "^12.0",
"laravel/tinker": "^2.10.1"
"laravel/tinker": "^2.10.1",
"ext-gd": "*"
},
"require-dev": {
"fakerphp/faker": "^1.23",

8235
composer.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
config/app.php
View File

@@ -65,7 +65,7 @@ return [
|
*/
'timezone' => 'UTC',
'timezone' => 'RPT',
/*
|--------------------------------------------------------------------------

2
config/filesystems.php
View File

@@ -32,7 +32,7 @@ return [
'local' => [
'driver' => 'local',
'root' => storage_path('app/private'),
'root' => storage_path('app/public'),
'serve' => true,
'throw' => false,
'report' => false,

BIN
public/fonts/arial.ttf Normal file
View File

Binary file not shown.

801
resources/views/index.blade.php Normal file
View File

@@ -0,0 +1,801 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记忆</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #e63946;
--secondary-color: #a8dadc;
--dark-color: #1d3557;
--light-color: #f1faee;
--accent-color: #457b9d;
--transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
--card-hover-shadow: 0 20px 40px rgba(231, 57, 70, 0.3);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: var(--light-color);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 3rem;
}
.main-title {
color: var(--light-color);
text-align: center;
margin-bottom: 3rem;
font-weight: 300;
letter-spacing: 3px;
font-size: 2.5rem;
text-transform: uppercase;
position: relative;
padding-bottom: 1rem;
}
.main-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: var(--primary-color);
}
/* 相册选择模块 */
.album-selection {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.album-card {
background: rgba(29, 53, 87, 0.7);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
cursor: pointer;
position: relative;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateY(0);
}
.album-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
border-color: var(--primary-color);
}
.album-cover {
height: 240px;
background-size: cover;
background-position: center;
position: relative;
transition: var(--transition);
}
.album-card:hover .album-cover {
transform: scale(1.02);
}
.album-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 2rem;
opacity: 1;
transition: var(--transition);
}
.album-info {
padding: 2rem;
text-align: center;
}
.album-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--light-color);
letter-spacing: 1px;
}
.album-date {
font-size: 0.9rem;
color: var(--secondary-color);
letter-spacing: 1px;
}
/* 相册详情模块 */
.album-detail {
display: none;
animation: fadeIn 0.5s ease-out;
}
.back-button {
background: rgba(69, 123, 157, 0.3);
border: none;
font-size: 1rem;
color: var(--light-color);
cursor: pointer;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
padding: 0.8rem 1.5rem;
border-radius: 30px;
backdrop-filter: blur(5px);
}
.back-button:hover {
background: rgba(69, 123, 157, 0.5);
transform: translateX(-5px);
}
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
}
.detail-title {
font-size: 2.5rem;
font-weight: 300;
color: var(--light-color);
margin: 0;
letter-spacing: 2px;
text-transform: uppercase;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.photo-item {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
aspect-ratio: 1;
background: rgba(29, 53, 87, 0.5);
transform: scale(1);
}
.photo-item:hover {
transform: scale(1.03);
box-shadow: var(--card-hover-shadow);
z-index: 2;
}
.photo-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
opacity: 0;
transform: scale(0.95);
}
.photo-img.loaded {
opacity: 1;
transform: scale(1);
}
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 3px solid rgba(168, 218, 220, 0.3);
border-radius: 50%;
border-top-color: var(--secondary-color);
animation: spin 1s ease-in-out infinite;
}
/* 图片预览模态框 */
.preview-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.preview-modal.active {
opacity: 1;
display: flex;
}
.modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
display: flex;
flex-direction: column;
align-items: center;
}
.modal-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
transform: scale(0.5);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
opacity: 0;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.modal-img.active {
transform: scale(1);
opacity: 1;
}
.modal-tools {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
}
.tool-btn {
background: rgba(230, 57, 70, 0.3);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
color: white;
font-size: 1.2rem;
backdrop-filter: blur(5px);
}
.tool-btn:hover {
background: rgba(230, 57, 70, 0.5);
transform: scale(1.1);
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: rgba(230, 57, 70, 0.3);
border: none;
border-radius: 50%;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: var(--transition);
z-index: 10;
backdrop-filter: blur(5px);
}
.nav-btn:hover {
background: rgba(230, 57, 70, 0.5);
transform: translateY(-50%) scale(1.1);
}
.prev-btn {
left: 30px;
}
.next-btn {
right: 30px;
}
.close-modal {
position: absolute;
top: 40px;
right: 40px;
background: rgba(230, 57, 70, 0.3);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
.close-modal:hover {
background: rgba(230, 57, 70, 0.5);
transform: rotate(90deg);
}
/* 动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 雪花背景效果 */
.snowflake {
position: fixed;
color: white;
font-size: 1em;
user-select: none;
pointer-events: none;
opacity: 0.8;
text-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
animation: fall linear infinite;
z-index: -1;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
/* 响应式设计 */
@media (max-width: 1024px) {
.container {
padding: 2rem;
}
.album-selection {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
@media (max-width: 768px) {
.container {
padding: 1.5rem;
}
.main-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.album-selection {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
}
.album-cover {
height: 200px;
}
.detail-title {
font-size: 2rem;
}
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.tool-btn, .close-modal {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.nav-btn {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.container {
padding: 1rem;
}
.main-title {
font-size: 1.8rem;
}
.album-selection {
grid-template-columns: 1fr;
}
.detail-title {
font-size: 1.8rem;
}
.photo-grid {
grid-template-columns: 1fr;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="main-title">我们的订婚相册</h1>
<!-- 相册选择模块 -->
<div class="album-selection" id="albumSelection">
<!-- 相册卡片将通过JS动态生成 -->
</div>
<!-- 相册详情模块 -->
<div class="album-detail" id="albumDetail">
<button class="back-button" id="backButton">
<i class="fas fa-arrow-left"></i> 返回相册列表
</button>
<div class="detail-header">
<h2 class="detail-title" id="detailTitle">相册标题</h2>
</div>
<div class="photo-grid" id="photoGrid">
<!-- 照片将通过JS动态生成 -->
</div>
</div>
</div>
<!-- 图片预览模态框 -->
<div class="preview-modal" id="previewModal">
<button class="close-modal" id="closeModal">
<i class="fas fa-times"></i>
</button>
<button class="nav-btn prev-btn" id="prevBtn">
<i class="fas fa-chevron-left"></i>
</button>
<div class="modal-content">
<img class="modal-img" id="modalImg" src="" alt="预览图片">
<div class="modal-tools">
<button class="tool-btn" id="rotateLeft" title="向左旋转">
<i class="fas fa-undo"></i>
</button>
<button class="tool-btn" id="rotateRight" title="向右旋转">
<i class="fas fa-redo"></i>
</button>
<button class="tool-btn" id="downloadBtn" title="下载图片">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<button class="nav-btn next-btn" id="nextBtn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<script>
const albums = <?php echo json_encode($photo_album) ?>;
// DOM元素
const albumSelection = document.getElementById('albumSelection');
const albumDetail = document.getElementById('albumDetail');
const detailTitle = document.getElementById('detailTitle');
const photoGrid = document.getElementById('photoGrid');
const backButton = document.getElementById('backButton');
const previewModal = document.getElementById('previewModal');
const modalImg = document.getElementById('modalImg');
const closeModal = document.getElementById('closeModal');
const rotateLeft = document.getElementById('rotateLeft');
const rotateRight = document.getElementById('rotateRight');
const downloadBtn = document.getElementById('downloadBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// 当前状态
let currentAlbum = null;
let currentPhotoIndex = 0;
let currentPhotos = [];
let currentRotation = 0;
// 初始化相册列表
function initAlbums() {
albumSelection.innerHTML = '';
albums.forEach(album => {
const albumCard = document.createElement('div');
albumCard.className = 'album-card';
albumCard.innerHTML = `
<div class="album-cover" style="background-image: url('${album.url}')">
<div class="album-overlay">
<div class="album-info">
<h3 class="album-title">${album.title}</h3>
<p class="album-date">${album.created_at}</p>
</div>
</div>
</div>
`;
albumCard.addEventListener('click', () => showAlbumDetail(album));
albumSelection.appendChild(albumCard);
});
}
// 显示相册详情
function showAlbumDetail(album) {
currentAlbum = album;
currentPhotos = album.photos;
detailTitle.textContent = album.title;
photoGrid.innerHTML = '';
album.photos.forEach((photo, index) => {
const photoItem = document.createElement('div');
photoItem.className = 'photo-item';
// 创建加载指示器
const spinner = document.createElement('div');
spinner.className = 'loading-spinner';
// 创建图片元素
const img = new Image();
img.className = 'photo-img';
img.alt = `照片 ${index + 1}`;
img.dataset.index = index;
// 设置data-src属性用于懒加载
img.dataset.src = photo.compressed;
// 添加点击事件
photoItem.addEventListener('click', () => {
currentPhotoIndex = index;
showPhotoPreview(photo.compressed);
});
// 观察图片是否进入视口
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
// 图片加载完成后显示
lazyImage.onload = () => {
lazyImage.classList.add('loaded');
if (spinner.parentNode === photoItem) {
photoItem.removeChild(spinner);
}
};
observer.unobserve(lazyImage);
}
});
}, {
rootMargin: '200px'
});
photoItem.appendChild(spinner);
photoItem.appendChild(img);
photoGrid.appendChild(photoItem);
// 开始观察图片
observer.observe(img);
});
albumSelection.style.display = 'none';
albumDetail.style.display = 'block';
// 滚动到顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 返回相册列表
function backToAlbums() {
albumDetail.style.display = 'none';
albumSelection.style.display = 'grid';
currentAlbum = null;
currentPhotos = [];
}
// 显示图片预览
function showPhotoPreview(photo) {
modalImg.src = photo;
currentRotation = 0;
modalImg.style.transform = 'rotate(0deg)';
previewModal.classList.add('active');
setTimeout(() => {
previewModal.style.opacity = '1';
setTimeout(() => {
modalImg.classList.add('active');
}, 50);
}, 10);
}
// 关闭图片预览
function closePhotoPreview() {
modalImg.classList.remove('active');
previewModal.style.opacity = '0';
setTimeout(() => {
previewModal.classList.remove('active');
}, 300);
}
// 显示上一张图片
function showPrevPhoto() {
if (currentPhotoIndex > 0) {
currentPhotoIndex--;
modalImg.classList.remove('active');
setTimeout(() => {
modalImg.src = currentPhotos[currentPhotoIndex].compressed;
modalImg.style.transform = 'rotate(0deg)';
currentRotation = 0;
setTimeout(() => {
modalImg.classList.add('active');
}, 50);
}, 300);
}
}
// 显示下一张图片
function showNextPhoto() {
if (currentPhotoIndex < currentPhotos.length - 1) {
currentPhotoIndex++;
modalImg.classList.remove('active');
setTimeout(() => {
modalImg.src = currentPhotos[currentPhotoIndex].compressed;
modalImg.style.transform = 'rotate(0deg)';
currentRotation = 0;
setTimeout(() => {
modalImg.classList.add('active');
}, 50);
}, 300);
}
}
// 旋转图片
function rotatePhoto(direction) {
if (direction === 'left') {
currentRotation -= 90;
} else {
currentRotation += 90;
}
modalImg.style.transform = `rotate(${currentRotation}deg)`;
}
// 下载图片
function downloadPhoto() {
if (!currentAlbum || currentPhotoIndex === null) return;
const link = document.createElement('a');
link.href = currentPhotos[currentPhotoIndex];
link.download = `photo_${currentAlbum.title}_${Date.now()}.jpg`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 事件监听
backButton.addEventListener('click', backToAlbums);
closeModal.addEventListener('click', closePhotoPreview);
rotateLeft.addEventListener('click', () => rotatePhoto('left'));
rotateRight.addEventListener('click', () => rotatePhoto('right'));
downloadBtn.addEventListener('click', downloadPhoto);
prevBtn.addEventListener('click', showPrevPhoto);
nextBtn.addEventListener('click', showNextPhoto);
// 键盘导航
document.addEventListener('keydown', (e) => {
if (previewModal.classList.contains('active')) {
if (e.key === 'ArrowLeft') {
showPrevPhoto();
} else if (e.key === 'ArrowRight') {
showNextPhoto();
} else if (e.key === 'Escape') {
closePhotoPreview();
}
}
});
// 初始化雪花效果
function createSnowflakes() {
const width = window.innerWidth;
const height = window.innerHeight;
const count = Math.min(50, Math.floor(width * height / 20000));
for (let i = 0; i < count; i++) {
createSnowflake();
}
}
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
const shapes = ['❄', '❅', '❆', '✻', '✼', '✾', '✵'];
const shape = shapes[Math.floor(Math.random() * shapes.length)];
snowflake.textContent = shape;
const size = Math.random() * 0.8 + 0.2;
snowflake.style.fontSize = `${size}em`;
snowflake.style.opacity = Math.random() * 0.6 + 0.3;
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.style.top = '-20px';
const duration = Math.random() * 5 + 5;
snowflake.style.animationDuration = `${duration}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
document.body.appendChild(snowflake);
snowflake.addEventListener('animationiteration', () => {
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.style.top = '-20px';
});
}
// 窗口大小改变时重新创建雪花
window.addEventListener('resize', () => {
const snowflakes = document.querySelectorAll('.snowflake');
snowflakes.forEach(snowflake => snowflake.remove());
createSnowflakes();
});
// 初始化应用
window.addEventListener('load', () => {
initAlbums();
createSnowflakes();
});
</script>
</body>
</html>

9
routes/api.php Normal file
View File

@@ -0,0 +1,9 @@
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::post('/upload', [\App\Http\Controllers\ImageController::class, 'upload']);

17
routes/web.php
View File

@@ -3,5 +3,20 @@
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
$photoAlbum = \App\Models\PhotoAlbumModel::with('photos')->get();
foreach ($photoAlbum as $album) {
$album->url = \Illuminate\Support\Facades\Storage::url($album->url);
$album->created_at = date('Y-m-d', $album->created_at);
foreach ($album['photos'] as $photo) {
$photo->original = \Illuminate\Support\Facades\Storage::url($photo->original);
$photo->compressed = \Illuminate\Support\Facades\Storage::url($photo->compressed);
$photo->watermarked = \Illuminate\Support\Facades\Storage::url($photo->watermarked);
}
}
// exit(json_encode($photoAlbum));
return view('index', [
'photo_album' => $photoAlbum,
]);
});
Route::post('/upload', [\App\Http\Controllers\ImageController::class, 'upload']);