1
0
mirror of https://github.com/upscayl/upscayl.git synced 2025-01-31 04:03:51 +01:00

Added image options

This commit is contained in:
Nayam Amarshe 2022-12-24 13:10:45 +05:30
parent 096726fceb
commit 5e33ab2c2f
3 changed files with 86 additions and 77 deletions

View File

@ -3,15 +3,13 @@ import React, { useEffect } from "react";
const ImageOptions = ({ const ImageOptions = ({
zoomAmount, zoomAmount,
setZoomAmount, setZoomAmount,
leftImageRef,
rightImageRef,
resetImagePaths, resetImagePaths,
hideZoomOptions,
}: { }: {
zoomAmount: string; zoomAmount: string;
setZoomAmount: (arg: any) => void; setZoomAmount: (arg: any) => void;
leftImageRef: React.RefObject<HTMLImageElement>;
rightImageRef: React.RefObject<HTMLImageElement>;
resetImagePaths: () => void; resetImagePaths: () => void;
hideZoomOptions?: boolean;
}) => { }) => {
useEffect(() => { useEffect(() => {
if (!localStorage.getItem("zoomAmount")) { if (!localStorage.getItem("zoomAmount")) {
@ -22,7 +20,7 @@ const ImageOptions = ({
}, []); }, []);
return ( return (
<div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100"> <div className="animate rounded-btn collapse absolute top-1 z-50 m-2 opacity-25 hover:opacity-100">
<input type="checkbox" className="peer" /> <input type="checkbox" className="peer" />
<div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content"> <div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content">
Show/Hide Image Settings Show/Hide Image Settings
@ -33,59 +31,61 @@ const ImageOptions = ({
<button className="btn-primary btn" onClick={resetImagePaths}> <button className="btn-primary btn" onClick={resetImagePaths}>
Reset Image Reset Image
</button> </button>
<div className="flex flex-row items-center gap-2"> {!hideZoomOptions && (
<p className="w-20">Zoom:</p> <div className="flex flex-row items-center gap-2">
<button <p className="w-20">Zoom:</p>
className={`btn-primary btn ${ <button
zoomAmount === "100%" ? "btn-secondary" : "btn-primary" className={`btn-primary btn ${
}`} zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
onClick={() => { }`}
setZoomAmount("100%"); onClick={() => {
localStorage.setItem("zoomAmount", "100%"); setZoomAmount("100%");
}}> localStorage.setItem("zoomAmount", "100%");
100% }}>
</button> 100%
<button </button>
className={`btn-primary btn ${ <button
zoomAmount === "125%" ? "btn-secondary" : "btn-primary" className={`btn-primary btn ${
}`} zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
onClick={() => { }`}
setZoomAmount("125%"); onClick={() => {
localStorage.setItem("zoomAmount", "125%"); setZoomAmount("125%");
}}> localStorage.setItem("zoomAmount", "125%");
125% }}>
</button> 125%
<button </button>
className={`btn-primary btn ${ <button
zoomAmount === "150%" ? "btn-secondary" : "btn-primary" className={`btn-primary btn ${
}`} zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
onClick={() => { }`}
setZoomAmount("150%"); onClick={() => {
localStorage.setItem("zoomAmount", "150%"); setZoomAmount("150%");
}}> localStorage.setItem("zoomAmount", "150%");
150% }}>
</button> 150%
<button </button>
className={`btn-primary btn ${ <button
zoomAmount === "175%" ? "btn-secondary" : "btn-primary" className={`btn-primary btn ${
}`} zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
onClick={() => { }`}
setZoomAmount("175%"); onClick={() => {
localStorage.setItem("zoomAmount", "175%"); setZoomAmount("175%");
}}> localStorage.setItem("zoomAmount", "175%");
175% }}>
</button> 175%
<button </button>
className={`btn-primary btn ${ <button
zoomAmount === "200%" ? "btn-secondary" : "btn-primary" className={`btn-primary btn ${
}`} zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
onClick={() => { }`}
setZoomAmount("200%"); onClick={() => {
localStorage.setItem("zoomAmount", "200%"); setZoomAmount("200%");
}}> localStorage.setItem("zoomAmount", "200%");
200% }}>
</button> 200%
</div> </button>
</div>
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -24,7 +24,6 @@ interface IProps {
setSaveImageAs: (arg: string) => void; setSaveImageAs: (arg: string) => void;
gpuId: string; gpuId: string;
setGpuId: (arg: string) => void; setGpuId: (arg: string) => void;
leftImageRef: any;
dimensions: { dimensions: {
width: number | null; width: number | null;
height: number | null; height: number | null;
@ -230,7 +229,8 @@ function LeftPaneImageSteps({
</span>{" "} </span>{" "}
to{" "} to{" "}
<span className="font-bold"> <span className="font-bold">
{dimensions.width * 4}x{dimensions.height * 4} {doubleUpscayl ? dimensions.width * 8 : dimensions.width * 4}x
{doubleUpscayl ? dimensions.height * 8 : dimensions.height * 4}
</span> </span>
</p> </p>
)} )}

View File

@ -499,21 +499,29 @@ const Home = () => {
!isVideo && !isVideo &&
upscaledImagePath.length === 0 && upscaledImagePath.length === 0 &&
imagePath.length > 0 && ( imagePath.length > 0 && (
<img <>
className="h-full w-full object-contain" <ImageOptions
src={ zoomAmount={zoomAmount}
"file://" + setZoomAmount={setZoomAmount}
`${upscaledImagePath ? upscaledImagePath : imagePath}` resetImagePaths={resetImagePaths}
} hideZoomOptions={true}
onLoad={(e: any) => { />
setDimensions({ <img
width: e.target.naturalWidth, src={
height: e.target.naturalHeight, "file://" +
}); `${upscaledImagePath ? upscaledImagePath : imagePath}`
}} }
draggable="false" onLoad={(e: any) => {
alt="" setDimensions({
/> width: e.target.naturalWidth,
height: e.target.naturalHeight,
});
}}
draggable="false"
alt=""
className={`h-full w-full bg-[#1d1c23] object-contain`}
/>
</>
)} )}
{/* BATCH UPSCALE SHOW SELECTED FOLDER */} {/* BATCH UPSCALE SHOW SELECTED FOLDER */}
@ -562,9 +570,10 @@ const Home = () => {
<img <img
src={"file://" + imagePath} src={"file://" + imagePath}
alt="Original" alt="Original"
onMouseMove={handleMouseMove}
style={{ style={{
objectFit: "contain", objectFit: "contain",
backgroundPosition: "0% 10%", backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition, transformOrigin: backgroundPosition,
}} }}
className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`} className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
@ -581,7 +590,7 @@ const Home = () => {
alt="Upscayl" alt="Upscayl"
style={{ style={{
objectFit: "contain", objectFit: "contain",
backgroundPosition: "0% 10%", backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition, transformOrigin: backgroundPosition,
}} }}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}