Преобразовать react-easy-crop Zoom/Params Params в правильное преобразование CSS: scale () translate () для динамическог ⇐ CSS

[Anonymous]

Я использую React-Easy-Crop в приложении Next.js/React, чтобы позволить пользователям обрезать изображения. Контейнер, удерживающий урожай, является динамическим - его ширина и высота могут измениться на основе макета.

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

 {
setPixelCrop(croppedAreaPixels);
}}
onMediaLoaded={mediaSize => {
setSize({ width: mediaSize.width, height: mediaSize.height });
}}
/>

in cangulatezoom () , я делаю:
const calculateZoom = () => {
return Math.max(
containerRef.current?.clientWidth / width || 1,
containerRef.current?.clientHeight / height || 1
);
};
< /code>
и представление Cropper на 100% правильное. Когда урожай завершен, я сохраняю: < /p>
onSave({
x: pixelCrop.x,
y: pixelCrop.y,
zoom: zoom
});
< /code>
Позже я хочу отображать изображение за пределами обрезки и визуально воспроизводить результат урожая, используя только преобразование CSS, например: < /p>

[img]{imageUrl}
transform: `translate(${-x}px, ${-y}px) scale(${zoom})`,
objectFit: 'cover',
}}
/>
< /code>
Но это не соответствует тому, что пользователи видели в Cropper. Особенно, когда контейнер изображения динамичен, а масштаб основан на minzoom = контейнер /размер изображения? < /P>
Я хочу, чтобы изображение выглядело точно так же, как и внутри. Идеально.
Заранее спасибо! Я также попробовал предложения по сгенерированию AI и самостоятельно создал несколько попыток формул, но я все еще не могу понять, как правильно преобразовать зум-масса в CSS Transform, который визуально соответствует обрезанному представлению.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ale-transl