App Engine Cropping to a Specific Width and Height

Question

I need to resize and crop an image to a specific width and height. I was able to construct a method that will create a square thumbnail, but I'm unsure on how to apply this, when the desired thumbnail is not square.

def rescale(data, width, height):
"""Rescale the given image, optionally cropping it to make sure the result image has the specified width and height."""
from google.appengine.api import images

new_width = width
new_height = height

img = images.Image(data)

org_width, org_height = img.width, img.height

# We must determine if the image is portrait or landscape
# Landscape
if org_width > org_height:
    # With the Landscape image we want the crop to be centered. We must find the
    # height to width ratio of the image and Convert the denominater to a float
    # so that ratio will be a decemal point. The ratio is the percentage of the image
    # that will remain.
    ratio = org_height / float(org_width)
    # To find the percentage of the image that will be removed we subtract the ratio
    # from 1 By dividing this number by 2 we find the percentage that should be
    # removed from each side this is also our left_x coordinate
    left_x = (1- ratio) / 2
    # By subtract the left_x from 1 we find the right_x coordinate
    right_x = 1 - left_x
    # crop(image_data, left_x, top_y, right_x, bottom_y), output_encoding=images.PNG)
    img.crop(left_x, 0.0, right_x, 1.0)
    # resize(image_data, width=0, height=0, output_encoding=images.PNG)
    img.resize(height=height)
# Portrait
elif org_width < org_height:
    ratio = org_width / float(org_height)
    # crop(image_data, left_x, top_y, right_x, bottom_y), output_encoding=images.PNG)
    img.crop(0.0, 0.0, 1.0, ratio)
    # resize(image_data, width=0, height=0, output_encoding=images.PNG)
    img.resize(width=witdh)

thumbnail = img.execute_transforms()
return thumbnail

If there is a better way to do this please let me know. Any help would be greatly appreciated.

Here's a diagram explaining the desired process.

Thanks,

Kyle

Answer 1

I had a similar problem (your screenshot was very useful). This is my solution:

def rescale(img_data, width, height, halign='middle', valign='middle'):
  """Resize then optionally crop a given image.

  Attributes:
    img_data: The image data
    width: The desired width
    height: The desired height
    halign: Acts like photoshop's 'Canvas Size' function, horizontally
            aligning the crop to left, middle or right
    valign: Verticallly aligns the crop to top, middle or bottom

  """
  image = images.Image(img_data)

  desired_wh_ratio = float(width) / float(height)
  wh_ratio = float(image.width) / float(image.height)

  if desired_wh_ratio > wh_ratio:
    # resize to width, then crop to height
    image.resize(width=width)
    image.execute_transforms()
    trim_y = (float(image.height - height) / 2) / image.height
    if valign == 'top':
      image.crop(0.0, 0.0, 1.0, 1 - (2 * trim_y))
    elif valign == 'bottom':
      image.crop(0.0, (2 * trim_y), 1.0, 1.0)
    else:
      image.crop(0.0, trim_y, 1.0, 1 - trim_y)
  else:
    # resize to height, then crop to width
    image.resize(height=height)
    image.execute_transforms()
    trim_x = (float(image.width - width) / 2) / image.width
    if halign == 'left':
      image.crop(0.0, 0.0, 1 - (2 * trim_x), 1.0)
    elif halign == 'right':
      image.crop((2 * trim_x), 0.0, 1.0, 1.0)
    else:
      image.crop(trim_x, 0.0, 1 - trim_x, 1.0)

  return image.execute_transforms()

Answer 2

You can specify both height and width parameters to resize -- it will not change the aspect ratio (you cannot do that with GAE's images module), but it will ensure that each of the two dimensions is <= the corresponding value you specify (in fact, one will be exactly equal to the value you specify, the other one will be <=).

I'm not sure why you're cropping first and resizing later -- it seems like you should do things the other way around... resize so that as much of the original image "fits" as is feasible, then crop to ensure exact resulting dimension. (So you wouldn't use the original provided values of height and width for the resize -- you'd scale them up so that none of the resulting image is "wasted" aka "blank", if I understand your requirements correctly). So maybe I'm not understanding exactly what you require -- could you provide an example (URLs to an image as it looks before the processing, to how it should look after the processing, and details of the parameters you'd be passing)?