Skip to content
This repository has been archived by the owner on Aug 1, 2020. It is now read-only.

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

Closed
cosecantt opened this issue Nov 20, 2014 · 3 comments
Closed

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

cosecantt opened this issue Nov 20, 2014 · 3 comments

Comments

@cosecantt
Copy link

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.

@cosecantt cosecantt changed the title [Feature] [Feature] Cropping the image relative to the crop-container size. Nov 20, 2014
@fengyuanchen
Copy link
Owner

Sorry, I don't understand the follow words:

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

@cosecantt
Copy link
Author

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
Copy link
Owner

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

fengyuanchen pushed a commit that referenced this issue Nov 24, 2014
#105: Improve "getDataURL" method, enable to customize the image sizes.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants