jcrop full width/height with ratio crop

Question

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):

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

---

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:

(the background has been shaded for contrast purposes)

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

Answer 1

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.