search

fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.75k stars 1.74k forks source link

[Feature] Cropping the image relative to the crop-container size. #105

Closed cosecantt closed 9 years ago

cosecantt commented 9 years ago

Currently the script crops the image relative to the natural size (naturalWidth, naturalHeight). Any option that I can crop it relative to the visible image in the crop-container? Working on natural size eats up much memory which is usually resulting in low memory in mobile phones. I guess adding this feature would benefit a lot for those who only uses this script for avatars where it reduces the server side code and effort. Thanks.

fengyuanchen commented 9 years ago

Sorry, I don't understand the follow words:

crop it relative to the visible image in the crop-container

cosecantt commented 9 years ago

Ok it was my thought on .crop-container. I will explain the matter itself:

Let my website's default avatar/image size is 100x100px.

User:

  1. Users click the default avatar image to upload(replace with) theirs;
  2. File browser pops up to choose;
  3. Choose the image;
  4. Modal shows up for cropping;
  5. They will chose the best visual part of the image by copping tool on the pop up dialog box before uploading it to the server.
  6. Click crop;
  7. Final image size must be 100x100px;

Then when they submit the image there is no much work on server side because the image size is already 100x100px, moreover the browser does not need to fetch it again from the server to the avatar image box after uploading. It will just replace the cropped image and the default avatar on client side.

Server: Converts base64 image to jpeg and assigns it to the user. Because all client side images will be converted to base64 during cropping.

Coder: He sets the aspectRatio: 1, finalImageWidth: 100 and finalImageHeight: 100 (NEW FEATURE MAYBE). Despite user resizes the cropping area the final cropped image should be 100x100px. Simply saying cropped image should be resized to 100x100px. Currently, the final cropped image size is equal to the cropping area which is really large on large images if you want best parts should be included in the image. For this particular purpose currently the downsides are:

  1. client should send huge image to the server (if the image is larger than 100x100px).
  2. makes additional server-side cropping job to scale it down/up to 100x100px if he wants to store the image with the given size(100x100px);

How can we achieve this? If the explanation is not clear I can explain further. Thank you for the great script.

fengyuanchen commented 9 years ago

I see! Thank you for your suggestion. I will try to support it.