Robert Scullin

I wanted an image to fill the screen in a Quartz Composer composition as part of a slideshow. However, there doesn’t seem to be a built in way to do what I wanted, which was to a) fill the screen without distorting the aspect ratio and b) not have any part of the image cropped. This can be accomplished with a Javascript patch and a bit of Javascript.

/*
 * ScaleImageToScreen (Quartz Composer / JavaScript)
 * This JavaScript will scale an image to fit to the screen,
 * dynamically resizing the image to make sure it fills the
 * screen without cropping the image.
 *
 * Robert Scullin - 2009
 *
 * This code is free for any use / purpose.
 * Use it for whatever; let me know if it's something cool / interesting.
 */

function (__number Width, __number Height) main (__number imageWidth, __number imageHeight, __number screenWidth, __number screenHeight)
{
	var result = new Object();

	var screenRatio = screenWidth / screenHeight;
	var imageRatio = imageWidth / imageHeight;

	if(imageRatio > screenRatio)
	{
		result.Width = screenWidth;
		result.Height = (screenWidth/imageWidth)*imageHeight;
	}
	else
	{
		result.Width = (screenHeight/imageHeight)*imageWidth;
		result.Height = screenHeight;
	}

	// Finally, return the scaled values
	return result;
}

And here’s how the patch + supporting patches are wired together. In this case, I created a macro with an Image input and a Width and Height output.

And this is what the entire patch setup looks like:

And now, no matter what size the canvas is, the image will scale to fit the screen, without cropping any part of the image or distorting aspect ratio.

Let me know if you have any comments / suggestions in the comments.