fix crop
This commit is contained in:
parent
257b027bac
commit
76b06f12ea
@ -19,7 +19,6 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
import { FC, useCallback, useMemo, useRef, useState } from "react";
|
import { FC, useCallback, useMemo, useRef, useState } from "react";
|
||||||
import ReactCrop, {
|
import ReactCrop, {
|
||||||
PercentCrop,
|
PercentCrop,
|
||||||
PixelCrop,
|
|
||||||
centerCrop,
|
centerCrop,
|
||||||
convertToPixelCrop,
|
convertToPixelCrop,
|
||||||
makeAspectCrop,
|
makeAspectCrop,
|
||||||
@ -82,7 +81,6 @@ export const CropModal: FC<Props> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [percentCrop, setPercentCrop] = useState<PercentCrop>();
|
const [percentCrop, setPercentCrop] = useState<PercentCrop>();
|
||||||
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
|
|
||||||
const [darken, setDarken] = useState(0);
|
const [darken, setDarken] = useState(0);
|
||||||
const [imageWidth, setImageWidth] = useState<number | null>(null);
|
const [imageWidth, setImageWidth] = useState<number | null>(null);
|
||||||
const [imageHeight, setImageHeight] = useState<number | null>(null);
|
const [imageHeight, setImageHeight] = useState<number | null>(null);
|
||||||
@ -96,23 +94,25 @@ export const CropModal: FC<Props> = ({
|
|||||||
|
|
||||||
function resetEditState() {
|
function resetEditState() {
|
||||||
setPercentCrop(undefined);
|
setPercentCrop(undefined);
|
||||||
setCompletedCrop(undefined);
|
|
||||||
setDarken(0);
|
setDarken(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleCropClick() {
|
async function handleCropClick() {
|
||||||
|
if (!percentCrop || !imageWidth || !imageHeight) return;
|
||||||
if (!cropImageElementRef.current) throw new Error("No image");
|
if (!cropImageElementRef.current) throw new Error("No image");
|
||||||
if (!completedCrop) return;
|
|
||||||
|
|
||||||
|
const width = cropImageElementRef.current.width;
|
||||||
|
const height = cropImageElementRef.current.height;
|
||||||
|
|
||||||
|
const pixelCrop = convertToPixelCrop(percentCrop, width, height);
|
||||||
try {
|
try {
|
||||||
const blob = await getCroppedImageBlob(
|
const blob = await getCroppedImageBlob(
|
||||||
cropImageElementRef.current,
|
cropImageElementRef.current,
|
||||||
completedCrop,
|
pixelCrop,
|
||||||
);
|
);
|
||||||
|
|
||||||
setCropModalImageBlob(blob);
|
setCropModalImageBlob(blob);
|
||||||
setPercentCrop(undefined);
|
setPercentCrop(undefined);
|
||||||
setCompletedCrop(undefined);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
devlog("getCroppedImageBlob error", error);
|
devlog("getCroppedImageBlob error", error);
|
||||||
enqueueSnackbar("Не удалось изменить изображение");
|
enqueueSnackbar("Не удалось изменить изображение");
|
||||||
@ -127,7 +127,6 @@ export const CropModal: FC<Props> = ({
|
|||||||
|
|
||||||
setCropModalImageBlob(blob);
|
setCropModalImageBlob(blob);
|
||||||
setPercentCrop(undefined);
|
setPercentCrop(undefined);
|
||||||
setCompletedCrop(undefined);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
devlog("getRotatedImageBlob error", error);
|
devlog("getRotatedImageBlob error", error);
|
||||||
enqueueSnackbar("Не удалось изменить изображение");
|
enqueueSnackbar("Не удалось изменить изображение");
|
||||||
@ -237,9 +236,8 @@ export const CropModal: FC<Props> = ({
|
|||||||
<ReactCrop
|
<ReactCrop
|
||||||
crop={percentCrop}
|
crop={percentCrop}
|
||||||
onChange={(_, percentCrop) => setPercentCrop(percentCrop)}
|
onChange={(_, percentCrop) => setPercentCrop(percentCrop)}
|
||||||
onComplete={(c) => setCompletedCrop(c)}
|
minWidth={5}
|
||||||
minWidth={50}
|
minHeight={5}
|
||||||
minHeight={50}
|
|
||||||
aspect={
|
aspect={
|
||||||
cropAspectRatio
|
cropAspectRatio
|
||||||
? cropAspectRatio.width / cropAspectRatio.height
|
? cropAspectRatio.width / cropAspectRatio.height
|
||||||
@ -256,8 +254,6 @@ export const CropModal: FC<Props> = ({
|
|||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
style={{
|
style={{
|
||||||
filter: `brightness(${100 - darken}%)`,
|
filter: `brightness(${100 - darken}%)`,
|
||||||
width: imageWidth ? imageWidth : undefined,
|
|
||||||
height: "100%",
|
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
maxHeight: "320px",
|
maxHeight: "320px",
|
||||||
display: "block",
|
display: "block",
|
||||||
@ -379,22 +375,17 @@ export const CropModal: FC<Props> = ({
|
|||||||
<Button
|
<Button
|
||||||
onClick={handleCropClick}
|
onClick={handleCropClick}
|
||||||
disableRipple
|
disableRipple
|
||||||
disabled={!completedCrop}
|
|
||||||
sx={{
|
sx={{
|
||||||
padding: "10px 20px",
|
padding: "10px 20px",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
background: theme.palette.brightPurple.main,
|
background: theme.palette.brightPurple.main,
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
color: "#7E2AEA",
|
color: "#7E2AEA",
|
||||||
border: `1px solid ${
|
border: "1px solid #7E2AEA",
|
||||||
!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
|
|
||||||
}`,
|
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CropIcon
|
<CropIcon color="#7E2AEA" />
|
||||||
color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}
|
|
||||||
/>
|
|
||||||
Обрезать
|
Обрезать
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user