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>