Paul
/
Take-Photo-Poster
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: Add Image Width & Height Attr

This commit is contained in:
奇趣保罗 2025-09-28 15:52:42 +08:00
parent 2ea1614644
commit edecb06d4f
4 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -1,15 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="zh-cmn-hans">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=768"> <meta name="viewport" content="width=768">
<title>晓螺｜摄影接单</title> <title>晓螺｜摄影接单</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap" rel="stylesheet">
</head> </head>
<body class="noto-sans-sc-400"> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

43
src/App.vue
View File

@ -2,6 +2,7 @@
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { snapdom } from "@zumer/snapdom"; import { snapdom } from "@zumer/snapdom";
import { Camera, Palette, Star, Aperture, Zap, User, Lightbulb, HeartHandshake, Users2, MapPin, WandSparkles } from "lucide-vue-next"; import { Camera, Palette, Star, Aperture, Zap, User, Lightbulb, HeartHandshake, Users2, MapPin, WandSparkles } from "lucide-vue-next";
import { IconQQ, IconWeChat, IconXHS } from "./components/common/icons";
interface MediaItem { interface MediaItem {
id: number; id: number;
@ -11,6 +12,8 @@ interface MediaItem {
thumb_url: string; thumb_url: string;
meta: string; meta: string;
take_time: string; take_time: string;
width?: number;
height?: number;
} }
const photos = ref<MediaItem[]>([]); const photos = ref<MediaItem[]>([]);
@ -24,11 +27,17 @@ const fetchPhotos = async () => {
const response = await fetch("https://paul.ren/api/media?cate=9&starred=1&size=30"); const response = await fetch("https://paul.ren/api/media?cate=9&starred=1&size=30");
const data = await response.json(); const data = await response.json();
// 处理图片 URL // 处理图片 URL
photos.value = data.data.map((photo: MediaItem) => ({ photos.value = data.data.map((photo: MediaItem) => {
const parsedMeta = JSON.parse(photo.meta);
return {
...photo, ...photo,
url: getImageUrl(photo.url), url: getImageUrl(photo.url),
thumb_url: getImageUrl(photo.thumb_url), thumb_url: getImageUrl(photo.thumb_url),
})); width: parsedMeta.COMPUTED.Width,
height: parsedMeta.COMPUTED.Height,
};
});
loading.value = false; loading.value = false;
await nextTick(); await nextTick();
@ -69,17 +78,18 @@ const captureScreenshot = async () => {
if (!posterRef.value || isCapturing.value) return; if (!posterRef.value || isCapturing.value) return;
isCapturing.value = true; isCapturing.value = true;
try { try {
const result = await snapdom(posterRef.value, { const result = await snapdom(posterRef.value, {
width: 1024, width: 1024,
// format: 'png', // format: 'png',
quality: 1, quality: 1,
// scale: 2 // scale: 2,
}); });
result.download({ result.download({
format: "webp", format: "webp",
filename: `晓螺摄影_${new Date().getTime()}.webp`, filename: `晓螺摄影_${new Date().getTime()}`,
}); });
} catch (error) { } catch (error) {
console.error("Screenshot failed:", error); console.error("Screenshot failed:", error);
@ -172,7 +182,7 @@ onMounted(() => {
<main v-if="loading" class="flex justify-center items-center h-64 mb-8"> <main v-if="loading" class="flex justify-center items-center h-64 mb-8">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-400"></div> <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-400"></div>
</main> </main>
<main v-else> <main v-else class="mb-8">
<div class="flex items-center justify-center gap-2 mb-8"> <div class="flex items-center justify-center gap-2 mb-8">
<Star :size="24" class="text-yellow-400" fill="currentColor" /> <Star :size="24" class="text-yellow-400" fill="currentColor" />
<div class="text-3xl font-bold text-yellow-400">近期例图</div> <div class="text-3xl font-bold text-yellow-400">近期例图</div>
@ -180,8 +190,8 @@ onMounted(() => {
</div> </div>
<div class="grid grid-cols-3 gap-2 mb-8"> <div class="grid grid-cols-3 gap-2 mb-8">
<div v-for="(column, colIndex) in columns" :key="colIndex" class="space-y-2"> <div v-for="(column, colIndex) in columns" :key="colIndex" class="space-y-2">
<div v-for="photo in column" :key="photo.id" class="relative rounded-lg overflow-hidden group"> <div v-for="photo in column" :key="photo.id" class="relative rounded-lg overflow-hidden group bg-gray-900">
<img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" /> <img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" :width="photo.width" :height="photo.height"/>
<div class="absolute bg-gradient-to-t from-black to-transparent bottom-0 left-0 right-0 p-4 pt-8 text-white transition-opacity duration-300 opacity-0 group-hover:opacity-100"> <div class="absolute bg-gradient-to-t from-black to-transparent bottom-0 left-0 right-0 p-4 pt-8 text-white transition-opacity duration-300 opacity-0 group-hover:opacity-100">
<h3 class="font-semibold text-white mb-1 text-lg">{{ photo.title }}</h3> <h3 class="font-semibold text-white mb-1 text-lg">{{ photo.title }}</h3>
<p class="text-xs opacity-60">{{ formatDate(photo.take_time) }}</p> <p class="text-xs opacity-60">{{ formatDate(photo.take_time) }}</p>
@ -189,6 +199,25 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center justify-center gap-2 mb-8">
<Star :size="24" class="text-yellow-400" fill="currentColor" />
<div class="text-3xl font-bold text-yellow-400">联系方式</div>
<Star :size="24" class="text-yellow-400" fill="currentColor" />
</div>
<div class="grid gap-4 grid-cols-2 text-gray-200 text-lg">
<div class="flex gap-2 items-center">
<IconQQ class="size-6 text-[#09f]" />
<span>1204958596</span>
</div>
<div class="flex gap-2 items-center">
<IconWeChat class="size-6 text-[#2bae67]" />
<span>dreamer-paul</span>
</div>
<div class="flex gap-2 items-center">
<IconXHS class="size-6 text-red-500" />
<span>@晓螺</span>
</div>
</div>
</main> </main>
<footer class="text-center text-gray-400"> <footer class="text-center text-gray-400">

19
src/components/common/icons.tsx Normal file
View File

@ -0,0 +1,19 @@
import type { SVGAttributes } from "vue";
export const IconQQ = (props: SVGAttributes) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
<path d="M19.9139 14.529C19.7336 13.955 19.4877 13.2856 19.2385 12.643L18.3288 10.3969C18.3295 10.371 18.3408 9.92858 18.3408 9.70053C18.3408 5.8599 16.5082 2.00037 12.0009 2C7.49403 2.00037 5.66113 5.8599 5.66113 9.70053C5.66113 9.92858 5.67237 10.371 5.67312 10.3969L4.76379 12.643C4.51453 13.2856 4.26827 13.955 4.08798 14.529C3.2285 17.2657 3.507 18.3982 3.71915 18.4238C4.17419 18.4779 5.49021 16.3635 5.49021 16.3635C5.49021 17.5879 6.12741 19.1858 7.5064 20.3398C6.99064 20.4971 6.35868 20.7388 5.95237 21.0355C5.58729 21.3025 5.63302 21.5743 5.69861 21.6841C5.9876 22.1661 10.6542 21.9918 12.0017 21.8417C13.3488 21.9918 18.0158 22.1661 18.3044 21.6841C18.3704 21.5743 18.4157 21.3025 18.0507 21.0355C17.6443 20.7388 17.012 20.4971 16.4959 20.3395C17.8745 19.1858 18.5117 17.5879 18.5117 16.3635C18.5117 16.3635 19.8281 18.4779 20.2831 18.4238C20.4949 18.3982 20.7734 17.2657 19.9139 14.529Z"></path>
</svg>
);
export const IconWeChat = (props: SVGAttributes) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
<path d="M18.5753 13.7114C19.0742 13.7114 19.4733 13.2873 19.4733 12.8134C19.4733 12.3145 19.0742 11.9155 18.5753 11.9155C18.0765 11.9155 17.6774 12.3145 17.6774 12.8134C17.6774 13.3123 18.0765 13.7114 18.5753 13.7114ZM14.1497 13.7114C14.6485 13.7114 15.0476 13.2873 15.0476 12.8134C15.0476 12.3145 14.6485 11.9155 14.1497 11.9155C13.6508 11.9155 13.2517 12.3145 13.2517 12.8134C13.2517 13.3123 13.6508 13.7114 14.1497 13.7114ZM20.717 18.7516C20.5942 18.8253 20.5205 18.9482 20.5451 19.1202C20.5451 19.1693 20.5451 19.2185 20.5696 19.2676C20.6679 19.6854 20.8643 20.349 20.8643 20.3736C20.8643 20.4473 20.8889 20.4964 20.8889 20.5456C20.8889 20.6685 20.7907 20.7668 20.6679 20.7668C20.6187 20.7668 20.5942 20.7422 20.5451 20.7176L19.0961 19.882C18.9978 19.8329 18.875 19.7837 18.7522 19.7837C18.6786 19.7837 18.6049 19.7837 18.5558 19.8083C17.8681 20.0049 17.1559 20.1032 16.3946 20.1032C12.7352 20.1032 9.78815 17.6456 9.78815 14.5983C9.78815 11.5509 12.7352 9.09329 16.3946 9.09329C20.0539 9.09329 23.001 11.5509 23.001 14.5983C23.001 16.2448 22.1168 17.7439 20.717 18.7516ZM16.6737 8.09757C16.581 8.09473 16.488 8.09329 16.3946 8.09329C12.2199 8.09329 8.78815 10.9536 8.78815 14.5983C8.78815 15.1519 8.86733 15.6874 9.01626 16.1975H8.92711C8.04096 16.1975 7.15481 16.0503 6.3425 15.8296C6.26866 15.805 6.19481 15.805 6.12097 15.805C5.97327 15.805 5.82558 15.8541 5.7025 15.9277L3.95482 16.9334C3.90559 16.958 3.85635 16.9825 3.80712 16.9825C3.65943 16.9825 3.53636 16.8599 3.53636 16.7127C3.53636 16.6391 3.56097 16.59 3.58559 16.5164C3.6102 16.4919 3.83174 15.6824 3.95482 15.1918C3.95482 15.1427 3.97943 15.0691 3.97943 15.0201C3.97943 14.8238 3.88097 14.6766 3.75789 14.5785C2.05944 13.3765 1.00098 11.5858 1.00098 9.59876C1.00098 5.94369 4.5702 3 8.95173 3C12.7157 3 15.8802 5.16856 16.6737 8.09757ZM11.5199 8.51604C12.0927 8.51604 12.5462 8.03871 12.5462 7.4898C12.5462 6.91701 12.0927 6.46356 11.5199 6.46356C10.9471 6.46356 10.4937 6.91701 10.4937 7.4898C10.4937 8.06258 10.9471 8.51604 11.5199 8.51604ZM6.26045 8.51604C6.83324 8.51604 7.28669 8.03871 7.28669 7.4898C7.28669 6.91701 6.83324 6.46356 6.26045 6.46356C5.68767 6.46356 5.23421 6.91701 5.23421 7.4898C5.23421 8.06258 5.68767 8.51604 6.26045 8.51604Z"></path>
</svg>
);
export const IconXHS = (props: SVGAttributes) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" {...props}>
<path d="M224 96a128 128 0 0 0-128 128v576a128 128 0 0 0 128 128h576a128 128 0 0 0 128-128v-576a128 128 0 0 0-128-128h-576z m56 279.68v232.832c-4.736 25.92-16.256 38.912-34.496 38.912 0 0-14.272 0.128-18.176 0-20.224 0.192-31.36-14.08-33.408-42.688h33.728V375.68h52.352zM193.92 445.312c1.024 14.848-0.256 40.128-3.84 75.712a230.848 230.848 0 0 1-33.6 99.2L128 567.808c5.312-16.896 9.024-36.48 11.136-58.752 2.048-22.272 2.496-43.52 1.28-63.808h53.504z m174.784 65.92c1.92 23.552 5.504 42.432 10.88 56.64l-28.416 52.288c-18.56-23.616-29.952-56-34.112-97.216-2.176-21.504-3.2-47.36-3.072-77.632h53.248c-0.896 20.352-0.384 42.24 1.472 65.92z m85.312-65.536c-1.92 3.84 0.896 5.76 8.256 5.76l3.072-6.144h50.176l-43.52 86.144c-1.472 2.816 0.64 5.312 2.752 5.312l30.848 0.448-23.232 41.792-61.12-0.32c-8.96-1.664-12.8-7.424-12.48-13.952a39.36 39.36 0 0 1 6.08-16.512l27.008-54.912-37.952-0.384c-9.024-1.536-11.136-8-10.752-14.656a45.696 45.696 0 0 1 4.096-15.168l43.328-87.424h50.176l-36.736 70.016z m187.776-0.384h-32.832v152.32h49.856v50.112H483.008l24.768-50.176h49.536V445.312h-33.472v-53.248h117.952v53.248z m-231.04 150.08l72.576 0.32-27.52 52.032-67.776-0.32c-3.328 0-6.592-1.856-9.6-5.568l25.984-49.856c1.984 2.304 4.096 3.392 6.272 3.392z m350.208-203.328l24.832 0.192c27.968 2.24 53.44 22.016 53.44 56.96v35.392l10.752 0.192a50.944 50.944 0 0 1 45.888 44.8L896 608a43.904 43.904 0 0 1-38.4 39.424l-22.848 0.128c-22.464 0.128-35.712-14.464-39.744-43.776h48.576l-0.256-57.216a12.48 12.48 0 0 0-9.152-9.6l-73.216-0.32v111.104h-51.072V536.64h-51.072v-52.032h51.072V444.16h-32.192v-52.032h32.192v-16.064h51.072v16.064z m0 92.544V444.16h18.752c3.392 0.192 6.4 2.56 7.296 5.888l0.256 34.624h-26.304z m134.336-67.2c0 12.608-9.28 23.104-21.312 25.088l-29.44 0.32 0.192-28.544a25.536 25.536 0 0 1 25.152-22.208c13.952 0 25.408 11.52 25.408 25.408z"></path>
</svg>
);

7
src/main.css
View File

@ -4,10 +4,3 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.noto-sans-sc-400 {
font-family: "Noto Sans SC", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}