0

I am trying to use Python Pillow to crop the images with react-image-crop and it seems to be working fine, but I can not figure out how to set the scale (zooming) to be working with the backend. Any help would be greatly appreciated!

Frontend- (React)

const scaleX = imgRef.current.naturalWidth / imgRef.current.width
const scaleY = imgRef.current.naturalHeight / imgRef.current.height

const pixelRatio = 1
const cropX = crop.x * scaleX
const cropY = crop.y * scaleY
const width = Math.floor(crop.width * scaleX * pixelRatio)
const height = Math.floor(crop.height * scaleY * pixelRatio)

const formData = new FormData()
formData.append('crop_x', cropX)
formData.append('crop_y', cropY)
formData.append('crop_height', height)
formData.append('crop_width', width)
formData.append("image", localImage)

const response = await axios.post('/image/upload/', formData)

Backend - (Django)

from PIL import Image

temp_image = Image.open(form.image)
left_x = float(form.get('crop_x'))
top_y = float(form.get('crop_y'))
right_x = left_x + float(form.get('crop_width'))
bottom_y = top_y + float(form.get('crop_height'))

thumbnail_image = temp_image.crop((left_x, top_y, right_x, bottom_y))
Raad Altaie
  • 1,025
  • 1
  • 15
  • 28
  • Does this answer your question? [How do I resize an image using PIL and maintain its aspect ratio?](https://stackoverflow.com/questions/273946/how-do-i-resize-an-image-using-pil-and-maintain-its-aspect-ratio) – Ankit Tiwari Aug 20 '22 at 06:18
  • @AnkitTiwari i am cropping the picture on frontend not resizing check the frontend cropping in here https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o – Raad Altaie Aug 20 '22 at 10:54

0 Answers0