Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-23 23:21:05 +01:00
Code Releases Wiki Activity

Add new lens view

Browse Source
This commit is contained in:
Nayam Amarshe 2024-09-22 06:38:10 +05:30
parent 0877b880de
commit 5d452d8aec
1 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
renderer/pages/index.tsx
View File

@ -811,43 +811,55 @@ const Home = () => {
className="group relative h-full w-full overflow-hidden"
onMouseMove={handleMouseMoveCompare}
>
{/* UPSCALED IMAGE */}
<img
className={`absolute left-0 top-0 h-full w-full object-contain transition-transform group-hover:scale-[${
zoomAmount + "%"
}]`}
src={"file:///" + imagePath}
style={{
backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition,
}}
className="h-full w-full object-contain"
src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled"
/>
{/* LENS */}
<div
className={`invisible absolute left-0 top-0 h-full w-full bg-white mix-blend-difference group-hover:visible group-hover:scale-[${
zoomAmount + "%"
}]`}
className="pointer-events-none absolute opacity-0 transition-opacity before:absolute before:left-1/2 before:h-full before:w-[2px] before:bg-white group-hover:opacity-100"
style={{
clipPath: `circle(${
(lensSize + 2 * (parseInt(zoomAmount) / 100)) /
(parseInt(zoomAmount) / 100)
}px at ${cursorPosition.x}px ${cursorPosition.y}px)`,
backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition,
left: cursorPosition.x - lensSize,
top: cursorPosition.y - lensSize / 2,
width: lensSize * 2,
height: lensSize,
border: "2px solid white",
boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.5)",
}}
/>
<img
className={`absolute h-full w-full object-contain transition-transform group-hover:scale-[${
zoomAmount + "%"
}]`}
src={"file:///" + upscaledImagePath}
style={{
clipPath: `circle(${
(lensSize + parseInt(zoomAmount) / 100) /
(parseInt(zoomAmount) / 100)
}px at ${cursorPosition.x}px ${cursorPosition.y}px)`,
backgroundPosition: backgroundPosition,
transformOrigin: backgroundPosition,
}}
/>
>
<div className="flex h-full w-full">
<div className="h-full w-full overflow-hidden">
<img
src={"file:///" + sanitizedImagePath}
alt="Original Image"
style={{
objectFit: "cover",
objectPosition: `${-cursorPosition.x + lensSize}px ${-cursorPosition.y + lensSize / 2}px`,
width: `${zoomAmount}%`,
height: `${zoomAmount}%`,
}}
/>
</div>
<div className="h-full w-full overflow-hidden">
<img
src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled"
style={{
objectFit: "cover",
objectPosition: `${-cursorPosition.x - lensSize}px ${-cursorPosition.y + lensSize / 2}px`,
width: `${zoomAmount}%`,
height: `${zoomAmount}%`,
}}
/>
</div>
</div>
<div className="absolute bottom-0 left-0 flex w-full items-center justify-around bg-black bg-opacity-50 p-1 px-2 text-center text-xs text-white backdrop-blur-sm">
<span>Original</span>
<span>Upscayl</span>
</div>
</div>
</div>
)}
{/* COMPARISON SLIDER */}