mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 05:07:46 +00:00
fix: image crop broken (#37)
This commit is contained in:
parent
3d2de94acf
commit
a42a4126ec
2 changed files with 115 additions and 114 deletions
|
|
@ -1,114 +1,114 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import ReactCrop, { type Crop } from "react-image-crop";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
image: string | undefined;
|
||||
setImage: (value: string | undefined) => void;
|
||||
}
|
||||
|
||||
export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const applyCrop = useCallback(() => {
|
||||
if (!imageRef.current || !canvasRef.current || !crop) return;
|
||||
|
||||
const image = imageRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
|
||||
if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const scaleX = image.naturalWidth / image.width;
|
||||
const scaleY = image.naturalHeight / image.height;
|
||||
|
||||
canvas.width = crop.width * scaleX;
|
||||
canvas.height = crop.height * scaleY;
|
||||
|
||||
ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
|
||||
|
||||
setImage(canvas.toDataURL());
|
||||
setCrop(undefined);
|
||||
}, [crop, setImage]);
|
||||
|
||||
const rotate = () => {
|
||||
if (!imageRef.current || !canvasRef.current) return;
|
||||
|
||||
const image = imageRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = image.naturalHeight;
|
||||
canvas.height = image.naturalWidth;
|
||||
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
|
||||
|
||||
setImage(canvas.toDataURL());
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Edit Image</h2>
|
||||
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full flex justify-center">
|
||||
<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
|
||||
<img ref={imageRef} src={image} />
|
||||
</ReactCrop>
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center gap-2">
|
||||
<button type="button" onClick={close} className="pill button">
|
||||
Done
|
||||
</button>
|
||||
<button type="button" onClick={applyCrop} className="pill button">
|
||||
Crop
|
||||
</button>
|
||||
<button type="button" onClick={rotate} className="pill button">
|
||||
Rotate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import ReactCrop, { type Crop } from "react-image-crop";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
image: string | undefined;
|
||||
setImage: (value: string | undefined) => void;
|
||||
}
|
||||
|
||||
export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const applyCrop = useCallback(() => {
|
||||
if (!imageRef.current || !canvasRef.current || !crop) return;
|
||||
|
||||
const image = imageRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
|
||||
if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const scaleX = image.naturalWidth / image.width;
|
||||
const scaleY = image.naturalHeight / image.height;
|
||||
|
||||
canvas.width = crop.width * scaleX;
|
||||
canvas.height = crop.height * scaleY;
|
||||
|
||||
ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
|
||||
|
||||
setImage(canvas.toDataURL());
|
||||
setCrop(undefined);
|
||||
}, [crop, setImage]);
|
||||
|
||||
const rotate = () => {
|
||||
if (!imageRef.current || !canvasRef.current) return;
|
||||
|
||||
const image = imageRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = image.naturalHeight;
|
||||
canvas.height = image.naturalWidth;
|
||||
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
|
||||
|
||||
setImage(canvas.toDataURL());
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Edit Image</h2>
|
||||
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full flex justify-center">
|
||||
<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
|
||||
<img ref={imageRef} src={image} />
|
||||
</ReactCrop>
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center gap-2">
|
||||
<button type="button" onClick={close} className="pill button">
|
||||
Done
|
||||
</button>
|
||||
<button type="button" onClick={applyCrop} className="pill button">
|
||||
Crop
|
||||
</button>
|
||||
<button type="button" onClick={rotate} className="pill button">
|
||||
Rotate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { StrictMode } from "react";
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter, Route, Routes } from "react-router";
|
||||
import "./index.css";
|
||||
import "react-image-crop/dist/ReactCrop.css";
|
||||
import "@fontsource-variable/lexend/wght.css";
|
||||
|
||||
import PrivacyPage from "./pages/privacy.tsx";
|
||||
|
|
|
|||
Loading…
Reference in a new issue