CODEWITHSUNDEEP
javascriptjquerycropjcrop
Lionel Chan
Lionel Chan

Reputation: 8069

jcrop full width/height with ratio crop

We implemented Jcrop in our system and it works fine so far. But we found out one minor issue lately:

Scenario

Our website lets users upload their company's logo. Our aspect ratio requirement is 200/150, and unfortunately, the user's company logo looks like this (200 x 63px):

200x63

The user uploaded the image, and because of our aspect ratio constrain, they see this:

enter image description here

Question: How do you crop to the full width or full height of the image? I don't mind if jcrop sends negative cropping dimension back to the server, as it should be smart enough to fill the image with white background. The final, expected image should look like this:

enter image description here

(the background has been shaded for contrast purposes)

Either jcrop can do it, or is there any alternative solution/plugins that we can use?

Upvotes: 2

Views: 3679

Answers (5)

Foreign Object
Foreign Object

Reputation: 1640

Doesn't jcrop have an explicit sizing method? I remember seeing that in the jcrop API:

$.Jcrop( '#box', { trueSize: [ w, h ] });

Not sure if this would allow you to override the crop ratio, but might be worth a try.

Upvotes: 0

Bene
Bene

Reputation: 1905

I'm not sure how you crop the image on the server side part of the script, but what you could do is add an extra button called "Use full image", in which the post data (x,y,width,height) would be the full size of the image. Then, if the ratio is higher than expected, you just create your image the same size you always wanted, resize the image by width and place it in the middle of your new image. So the following code is only "pseudo code" to show what im talking about. So let's say the user wants to upload an image which is 1000px * 200px, and the ratio you want is 200px * 150px. The users chooses "full image size" so you send datas pretty much like this: 0,0,1000,200 (position: 0,0 and width/height: 1000, 200). On the server side, you can do all the necessary calculations:

$width = $_POST['width'];
$height= $_POST['height'];
$fullsize = isset($_POST['fullsize']) && $_POST['fullsize']; // If the full size mode is on.
if ($fullsize) {
  $image = new Image(0,0,200,150); // Create the image canvas with whatever plugin your using.
  if (($width/$height) > (200/150)) { // If WIDTH ratio is higher...
    $x = 0; // We already know the image will be align on the left because of the previous calculations (ratio)
    $y = (150/2) - ($height/2); // 50% top - half the image size = center.

  }
  if (($height/$width) > (150/200)) { // If HEIGHT ratio is higher...
    // Repeat previous code with adjusted values for height instead of width.
  }
  // The next part is pure fiction, i dont know what php extension you use, but lets pretend this is working.
  $newImage = new Image($x,$y,$width,$height,$file); // $file is probably the $_FILEs...
  $image->placeInsideCanvas($newImage); // Imagine this adds the image into your previously created canvas (200/150);
  $image->output();
}

I Hope this helped.

Upvotes: 1

alexandrin88
alexandrin88

Reputation: 4400

I would do this by setting a radio button that allows the user to dynamically change from the fixed aspect ratio to any aspect ratio, that way allowing the user to select the whole area of the photo.

The server will be able to force resize the result of the cropped photo to the configured final dimensions and aspect ratio of the logo by autofilling any blank space with white, not by stretching the photo if the script is configured correctly.

Upvotes: 1

DhruvPathak
DhruvPathak

Reputation: 43245

The main intent of cropping is to get relevant content from image, and in a preferred aspect ratio . However, if restrictions of aspect ratio cause you to lose image data, you're right in going for the padding solution.

Follow this process:

  1. Let the user upload the image, then show them page#2 , where they can crop the uploaded image.
  2. One page#2 :

  3. List item

    (a) Use javascript to calculate how much area, a 200:150 aspect ratio rectangle can cover on the image.

    (b) If this area is more than 90% ( or whatever value you want) , allow the user to crop, you'll get a relevant result, which will abide to your aspect ratio requirements.

    (c) If the area is less than 90%, as is the case in this 200px by 63px image, change the javascript variables for aspect ratio, make them exactly/roughly equal to aspect ratio of the image i.e. 200:65 for example. This way the user will be able to crop a fuller part from the logo.

    (d) In your backend script, check if its case (b) or case (c). If it is (b), use your image processing library to just generate the cropped image. If its (c), create a white rectangle of aspect ratio 200:150 ( your desired ratio), and overlap the image generated by cropping in (c), and you get your desired result.

This way, both your cases are covered. And this does not confuse your users as well, they will very well understand cropping was done to select the best part of the logo, and that white padding has been done to make the UI uniform.

Upvotes: 1

TheBrain
TheBrain

Reputation: 5608

you should show him the crop tool on a 200/150 box (or some other dimensions but with this w/h ratio) where you load and display his upload image centered and not on the image he uploaded.

Upvotes: 2

Related Questions