My aim is to allow users the ability to upload a profile image and then crop it before uploading to ensure it fits perfectly within the image container. This is a common issue that is encountered frequently.
The challenge I am facing arises when a user uses a mobile device to upload their image, resulting in a cropped and uploaded image that is only around 350 pixels wide. This causes the images to become highly pixelated when viewed on larger screens that stretch them to sizes upwards of 700 pixels.
The process typically involves a user selecting a new image from their device for upload, which is then displayed in the browser for cropping. The resulting cropped image (in base64 format) maintains the correct aspect ratio but ends up being sized according to the width and height of the device's screen, potentially leading to small dimensions when viewed on smaller devices.
I currently utilize Croppie.js for cropping, which functions well. However, the base64 image produced in the browser after cropping on a smaller device turns out to be tiny in pixel size. Since this base64 image is what ultimately gets uploaded, it leads to the stretching and pixelation issues mentioned earlier on larger devices.
Any suggestions or alternative methods that I may have overlooked would be greatly welcomed.