Images - Rounded Corners and Transparency

The tip of the week for March 14, 2008 shows how to use Lasso's image tags to create images with rounded corners and how to add transparency to a PNG file.

Background

This tip is the product of two conversations I had over the past week. The first was about the LassoSoft Web site and how we construct the images with rounded upper-right and lower-left corners. The second was about how to layer multiple images on top of each other with one showing through the second.

I realized that both of these things would be easy to do with Lasso's image tags. In addition, the [Serve] tag which is described in a previous tip of the week could be updated to make both of these things possible.

<http://www.lassosoft.com/Documentation/TotW/index.lasso?9177>

This tip includes a new [Serve] tag and Serve.LassoApp which can:

Modify images by adding one or more rounded white corners. All images can be rounded or any selection of corners can be rounded. The rounding is of fixed dimension, matching the style of the LassoSoft Web site.
Modify images by making one specific color in the image transparent. For example, all white pixels in the image can be made transparent. This works with the rounded corner option to provide transparent rounded corner for PNG graphics.
In addition, the implementation is described so these same routines can be incorporated into your code using just the [Image] tag.

Download

The new [Serve] tag, implemented as Serve.LassoApp can be downloaded from the following URL.

<http://download.lassosoft.com/pub/totw/TotW_20080314.zip>

The [Serve] Tag

The [Serve] tag supports several modes of operations, but for this tip we are going to assume that the image we want to modify is on disk. The [Serve] tag reads the image in, modifies it, and returns a URL which references the modified images. In order to use the [Serve] tag you must [Include('Serve.LassoApp')] or place the LassoApp in your LassoStartup folder. See the original tip, linked above, for details about how this works.

For example, the following code would simply serve the image serve.png.

<img src="[Serve: -File='serve.png']" />

 

We modify the image by adding an array of -Options. There are many options including options to flip the image, scale the image, rotate the image, etc.

For example, adding a -MaxWidth option will scale the image down to this width, scaling the height proportionately.

<img src="[Serve: -File='serve.png', -Options=(Array: -MaxWidth=216)]" />

Rounded Corner and Transparency Options

A new -Round option rounds the corners of the image. By default all of the corners are rounded by a fixed amount and filled with white. One or more corners can be rounded by listing the desired corners (ur,ul,lr,ll) as in -Round='ur,ll' to round the upper-right and lower-left corners.

For example, adding the -Round option will round the specified corners with white.
 

<img src="[Serve: -File='serve.png', -Options=(Array: -Round='ur,ll', -MaxWidth=216)]" />

 

A new -Transparent option will knock one color out of the image, making it transparent. This option should only work on PNG and GIF images (since most other image formats do not support transparency). By default white will be made transparent. Note, if this option is combined with -Round then only the corners will be transparent by default.

For example, adding the -Transparent option will create transparent rounded corners.

<img src="[Serve: -File='serve.png', -Options=(Array: -Transparent, -Round='ur,ll', -MaxWidth=216)]" />

Implementation

The implementation of the rounded corners is straightforward. Each rounded corner is created with a simple pattern of lines of width 5, 3, 2, 1, 1. This creates a rounded corner which extends 5 pixels from the corner of the image.
 

*****
***
**
*
*

 

The pattern is created on the image using a series of -draw commands issued through the [Image->Execute] command to "mogrify". The pattern is clearest in the upper-left corner. The latter patterns are the same, but require some math to determine the pixel offsets based on the width and/or height of the image.

	// Load the Image
	Var('image') = Image('serve.png');
	// Scale the Image
	$image->Scale(-Width=216);

	// Calculate the Corners
	Var('round') = 'all'; // Set to all or a set of ul,ur,ll,lr
	Var('h') = $image->height;
	Var('w') = $image->width;
	Var('draw') = array;
	If($round == 'all' || $round >> 'ul');
		$draw->Insert('-draw "line 0,0 4,0"');
		$draw->Insert('-draw "line 0,1 2,1"');
		$draw->Insert('-draw "line 0,2 1,2"');
		$draw->Insert('-draw "point 0,3"');
		$draw->Insert('-draw "point 0,4"');
	/If;
	If($round == 'all' || $round >> 'ur');
		$draw->Insert('-draw "line '+($w-5)+',0 '+($w-1)+',0"');
		$draw->Insert('-draw "line '+($w-3)+',1 '+($w-1)+',1"');
		$draw->Insert('-draw "line '+($w-2)+',2 '+($w-1)+',2"');
		$draw->Insert('-draw "point '+($w-1)+',3"');
		$draw->Insert('-draw "point '+($w-1)+',4"');
	/If;
	If($round == 'all' || $round >> 'll');
		$draw->Insert('-draw "line 0,'+($h-1)+' 4,'+($h-1)+'"');
		$draw->Insert('-draw "line 0,'+($h-2)+' 2,'+($h-2)+'"');
		$draw->Insert('-draw "line 0,'+($h-3)+' 1,'+($h-3)+'"');
		$draw->Insert('-draw "point 0,'+($h-4)+'"');
		$draw->Insert('-draw "point 0,'+($h-5)+'"');
	/If;
	If($round == 'all' || $round >> 'lr');
		$draw->Insert('-draw "line '+($w-5)+','+($h-1)+' '+($w-1)+','+($h-1)+'"');
		$draw->Insert('-draw "line '+($w-3)+','+($h-2)+' '+($w-1)+','+($h-2)+'"');
		$draw->Insert('-draw "line '+($w-2)+','+($h-3)+' '+($w-1)+','+($h-3)+'"');
		$draw->Insert('-draw "point '+($w-1)+','+($h-4)+'"');
		$draw->Insert('-draw "point '+($w-1)+','+($h-5)+'"');
	/If;
	
	// Replace white with off-white
	$image->Execute('mogrify -fill #fefefe -opaque #ffffff');
	// Draw the corners
	$image->Execute('mogrify -fill #ffffff ' + $draw->Join(' '));
	// Transparent Corners 
	$image->Execute('mogrify -transparent #ffffff');
	// Serve the Image
	File_Serve($image->Data, -type='image/png', -name='serve.png');

 

The -fill command sets the color for the subsequent -draw commands. The additional -fill and -opaque commands modify all actual white #ffffff in the image to just-off-white #fefefe. This prevents a subsequent transparency option from adjusting all white in the image, but makes it so it only affects the corners.

Transparency is executed with a single "mogrify". The following command modifies the image so all white #ffffff images in the pixel are made transparent. Combine this with the code above to create transparent corners.

	// Load the Image
	Var('image') = Image('serve.png');
	// Scale the Image
	$image->Scale(-Width=216);

	// Transparent White
	$image->Execute('mogrify -transparent #ffffff');

	// Serve the Image
	File_Serve($image->Data, -type='image/png', -name='serve.png');

More Information

All of the tags which are used in this tip are documented in the online Lasso Reference at the following URL:

http://www.lassosoft.com/lassoDocs/languageReferenceCategories

 

Author: Fletcher Sandbeck
Created: 15 Mar 2011
Last Modified: 16 Mar 2011