mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-12 01:40:53 +01:00
Add new lens view
This commit is contained in:
parent
0877b880de
commit
5d452d8aec
@ -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 */}
|
||||
|
Loading…
Reference in New Issue
Block a user