HayemR/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor fixes
Deploy photobooth / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
HayemR
2026-05-26 12:55:18 +07:00
parent 79b959aac7
commit f7880a3e13
2 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PhotoStrip.vue
+61 -9
View File
@@ -11,9 +11,7 @@ const themeConfig = computed(
() => STRIP_THEME_MAP[props.theme] || STRIP_THEME_MAP[DEFAULT_STRIP_THEME_ID],
)
const borderColor = computed(() => themeConfig.value?.borderColor || '#ffffff')
const stripShadow = computed(
() => themeConfig.value?.shadow || '0 24px 60px rgba(0, 0, 0, 0.18)',
)
const stripShadow = computed(() => themeConfig.value?.shadow || '0 24px 60px rgba(0, 0, 0, 0.18)')
const stripSize = computed(() => themeConfig.value.size)
const frames = computed(() => themeConfig.value.slots || [])
@@ -52,28 +50,82 @@ function clipStyle(rect) {
>
<template v-if="photos[index]">
<template v-if="rect.radius || rect.clipPath">
<svg :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :viewBox="`0 0 ${Math.max(rect.width - 16, 0)} ${Math.max(rect.height - 16, 0)}`" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<svg
:width="Math.max(rect.width - 16, 0)"
:height="Math.max(rect.height - 16, 0)"
:viewBox="`0 0 ${Math.max(rect.width - 16, 0)} ${Math.max(rect.height - 16, 0)}`"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath :id="`clip-${props.theme}-${index}`">
<template v-if="rect.clipPath">
<path :d="rect.clipPath" />
</template>
<template v-else>
<rect x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :rx="rect.radius" :ry="rect.radius" />
<rect
x="0"
y="0"
:width="Math.max(rect.width - 16, 0)"
:height="Math.max(rect.height - 16, 0)"
:rx="rect.radius"
:ry="rect.radius"
/>
</template>
</clipPath>
</defs>
<image :href="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :clip-path="`url(#clip-${props.theme}-${index})`" preserveAspectRatio="xMidYMid slice" />
<image
:href="
photos[index].preview !== undefined
? photos[index].preview || photos[index].src
: photos[index].src !== undefined
? photos[index].src
: photos[index]
"
x="0"
y="0"
:width="Math.max(rect.width - 16, 0)"
:height="Math.max(rect.height - 16, 0)"
:clip-path="`url(#clip-${props.theme}-${index})`"
preserveAspectRatio="xMidYMid slice"
/>
<template v-if="rect.clipPath">
<path :d="rect.clipPath" fill="none" :stroke="borderColor" stroke-width="12" stroke-linejoin="round" />
<path
:d="rect.clipPath"
fill="none"
:stroke="borderColor"
stroke-width="12"
stroke-linejoin="round"
/>
</template>
<template v-else>
<rect x="6" y="6" :width="Math.max(rect.width - 28, 0)" :height="Math.max(rect.height - 28, 0)" :rx="Math.max((rect.radius || 0) - 2, 0)" :ry="Math.max((rect.radius || 0) - 2, 0)" fill="none" :stroke="borderColor" stroke-width="10" />
<rect
x="6"
y="6"
:width="Math.max(rect.width - 28, 0)"
:height="Math.max(rect.height - 28, 0)"
:rx="Math.max((rect.radius || 0) - 2, 0)"
:ry="Math.max((rect.radius || 0) - 2, 0)"
fill="none"
:stroke="borderColor"
stroke-width="10"
/>
</template>
</svg>
</template>
<template v-else>
<img :src="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" :alt="`Captured photo ${index + 1}`" class="frame-photo" :style="clipStyle(rect)" />
<img
:src="
photos[index].preview !== undefined
? photos[index].preview || photos[index].src
: photos[index].src !== undefined
? photos[index].src
: photos[index]
"
:alt="`Captured photo ${index + 1}`"
class="frame-photo"
:style="clipStyle(rect)"
/>
</template>
</template>
</div>
src/pages/Customize.vue
+25 -3
View File
@@ -44,7 +44,12 @@ function handleApply(payload) {
// payload: { dataUrl, transform }
const { dataUrl, transform } = payload
if (editorIndex.value >= 0) {
const original = (store.photos[editorIndex.value] && (store.photos[editorIndex.value].src || store.photos[editorIndex.value])) || (previewPhotos.value[editorIndex.value] && (previewPhotos.value[editorIndex.value].src || previewPhotos.value[editorIndex.value])) || null
const original =
(store.photos[editorIndex.value] &&
(store.photos[editorIndex.value].src || store.photos[editorIndex.value])) ||
(previewPhotos.value[editorIndex.value] &&
(previewPhotos.value[editorIndex.value].src || previewPhotos.value[editorIndex.value])) ||
null
const obj = { src: original, preview: dataUrl, transform }
previewPhotos.value[editorIndex.value] = obj
// persist to store as well
@@ -84,7 +89,19 @@ function handleApply(payload) {
<ThemeSelector />
<RouterLink class="primary" to="/result">Generate strip</RouterLink>
</section>
<ImageEditor v-if="editorIndex >= 0" :src="(store.photos[editorIndex] && (store.photos[editorIndex].src || store.photos[editorIndex])) || previewPhotos[editorIndex]" :initialTransform="(store.photos[editorIndex] && store.photos[editorIndex].transform) || null" :outputWidth="440" :outputHeight="290" @cancel="handleCancel" @apply="handleApply" />
<ImageEditor
v-if="editorIndex >= 0"
:src="
(store.photos[editorIndex] &&
(store.photos[editorIndex].src || store.photos[editorIndex])) ||
previewPhotos[editorIndex]
"
:initialTransform="(store.photos[editorIndex] && store.photos[editorIndex].transform) || null"
:outputWidth="440"
:outputHeight="290"
@cancel="handleCancel"
@apply="handleApply"
/>
</main>
</template>
@@ -129,7 +146,12 @@ function handleApply(payload) {
align-items: center;
gap: 6px;
}
.edit-thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px }
.edit-thumb img {
width: 84px;
height: 64px;
object-fit: cover;
border-radius: 8px;
}
.options-panel {
display: grid;