github/upscayl
1
1
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2026-04-25 03:00:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update function and translation

Browse Source
This commit is contained in:
Nayam Amarshe
2024-10-04 14:42:03 +05:30
parent 31aa0f91e1
commit 4b29d4b012
3 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
renderer/components/main-content/lens-view.tsx
View File

@@ -1,5 +1,31 @@
import React, { useRef, useState } from "react";
const LensImage = ({
src,
alt,
lensPosition,
zoomAmount,
}: {
src: string;
alt: string;
lensPosition: { x: number; y: number };
zoomAmount: number;
}) => (
<div className="h-full w-full overflow-hidden">
<img
src={src}
alt={alt}
className="h-full w-full"
style={{
objectFit: "contain",
objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
transform: `scale(${zoomAmount / 100})`,
transformOrigin: "top left",
}}
/>
</div>
);
const LensViewer = ({
zoomAmount,
lensSize,
@@ -53,32 +79,18 @@ const LensViewer = ({
}}
>
<div className="flex h-full w-full">
<div className="h-full w-full overflow-hidden">
<img
src={"file:///" + sanitizedImagePath}
alt="Original"
className="h-full w-full"
style={{
objectFit: "contain",
objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
transform: `scale(${parseInt(zoomAmount) / 100})`,
transformOrigin: "top left",
}}
/>
</div>
<div className="h-full w-full overflow-hidden">
<img
src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled"
className="h-full w-full"
style={{
objectFit: "contain",
objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
transform: `scale(${parseInt(zoomAmount) / 100})`,
transformOrigin: "top left",
}}
/>
</div>
<LensImage
src={"file:///" + sanitizedImagePath}
alt="Original"
lensPosition={lensPosition}
zoomAmount={parseInt(zoomAmount)}
/>
<LensImage
src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled"
lensPosition={lensPosition}
zoomAmount={parseInt(zoomAmount)}
/>
</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>