Мне нужно отредактировать фотографию профиля, например, upwork. ⇐ CSS

[Anonymous]

Мне нужен способ редактировать фотографию профиля, как в Instagram и Upwork. Код, который я пробовал ниже, работал, но не обеспечивает плавности работы. Я испытываю некоторые зависания и ошибки. Есть ли более простой способ сделать это, или я не знаю, где я ошибаюсь.

Код: Выделить всё

   useEffect(() => {
const canvas = canvasRef.current;
const container = document.getElementById("canvas-container");

if (canvas && container) {
const containerRect = container.getBoundingClientRect();
const canvasRect = canvas.getBoundingClientRect();

const handleMouseDown = (e: MouseEvent) => {
setDragging(true);
setPosition({ x: canvas.offsetLeft, y: canvas.offsetTop });
setStartPosition({ x: e.clientX, y: e.clientY });
};

const handleMouseMove = (e: MouseEvent) => {
if (!dragging) return;

let newX = position.x;
let newY = position.y;

if (canvasRect.width === 300) {
newX = position.x;
}

if (canvasRect.height === 300) {
newY = position.y;
}

let kilitTop = canvasRect.top = containerRect.right + 10;

if (kilitTop && kilitBot) {
newY = position.y + (e.clientY - startPosition.y);
}
if (kilitLeft && kilitRight) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.height !== 300 && !kilitTop && e.clientY - startPosition.y < 0) {
newY = position.y + (e.clientY - startPosition.y);
}
if (canvasRect.height !== 300 && !kilitTop && canvasRect.top > containerRect.top) {
newY = position.y + (containerRect.top - canvasRect.top);
}
if (canvasRect.height !== 300 && !kilitBot && e.clientY - startPosition.y > 0) {
newY = position.y + (e.clientY - startPosition.y);
}
if (canvasRect.height !== 300 && !kilitBot && canvasRect.bottom < containerRect.bottom) {
newY = position.y - (canvasRect.bottom - containerRect.bottom);
}
if (canvasRect.width !== 300 && !kilitLeft && e.clientX - startPosition.x < 0) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.width !== 300 && !kilitLeft && canvasRect.left > containerRect.left) {
newX = position.x + (containerRect.left - canvasRect.left);
}
if (canvasRect.width !== 300 && !kilitRight && e.clientX - startPosition.x > 0) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.width !== 300 && !kilitRight && canvasRect.right < containerRect.right) {
newX = position.x + (containerRect.right - canvasRect.right);
}

setPosition({ x: newX, y: newY });
setStartPosition({ x: e.clientX, y: e.clientY });
};

const handleMouseUp = () => setDragging(false);

const handleMouseLeave = () => setDragging(false);

canvas.addEventListener("mousedown", handleMouseDown);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
canvas.addEventListener("mouseleave", handleMouseLeave);

return () => {
if (canvas) {
canvas.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
canvas.removeEventListener("mouseleave", handleMouseLeave);
}
};
}
}, [imgSrc, dragging, position, setPosition]);

что я хочу сделать в конце, так это иметь изображение внутри круглого элемента div размером 300x300 пикселей, и, например, левый край этого изображения не должен находиться дальше внутри левого края элемента div или правый край не должен находиться дальше правого края div. между изображением и элементом div никогда не должно быть пробела. на этой фотографии желтый значок «X»:



Подробнее здесь: https://stackoverflow.com/questions/793 ... ike-upwork