CODEWITHSUNDEEP
javascriptimagecanvas
silencedogood
silencedogood

Reputation: 3299

Uploading cropped image from multiple devices while maintaining larger image size

My goal is to allow users to upload a profile image, and to crop the image prior to uploading in order to fit nicely in the image container. This is a very common issue.

The problem I’m having is that when the user is using a mobile device, the cropped and uploaded image ends up being roughly 350 pixels wide, which results in highly pixelized images when viewed on a large screen that ends up stretching the image as needed (upwards of 700 pixels).

The flow is as follows: user chooses new image locally to upload; this image is then implanted into the browser in order to be cropped; the resulting cropped image (base64) comes out with the correct aspect ratio, but the size (width and height) in pixels is in accordance with the devices screen width, which may be very small depending on the device.

I’m using Croppie.js to do the cropping, which works fine. However, the resulting base64 image located in the browser is very small in pixels when cropped on a small device (phone, etc.). The base64 image is what ends up getting uploaded, so this results in the problem mentioned above with stretching and pixelization on larger devices.

Any input or other techniques that I’ve overlooked would be greatly appreciated.

Upvotes: 1

Views: 512

Answers (1)

C.J. Coffey
C.J. Coffey

Reputation: 60

Per https://foliotek.github.io/Croppie/ :

when you call for result, using size = original should get you the higher quality image, which you can scale to the size you need when you display it.

Upvotes: 0

Related Questions