A new action (besides crop, scale, resize) that adds rounded corners.

The action could merge the main image with four .PNGs or .GIFs (each for one corner, or better the same just rotated by 90°, 180°, 270°).

One default corner_10px.png file could be included while it should be possible to add a path to a custom corner image (for different background color or corner radius).

The corner image could also be dynamically generated (while i would prefer the custom path). This could be an approach: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Comments

amitaibu’s picture

What about Rounded Corners module?

derjochenmeyer’s picture

The rounded corners module (btw: i dont get it working) applies rounded corners using jquery. So its a client side thing. Having a list lets say of products or a gallery with 100+ thumbnails the clients computer will ahve a hard time.

Imagecache-rounded-corners coluld be a browser independent fully controllable (and simply customizeable) way of doing this. And its all in one place. If i want to resize crop scale and add round corners to my image it would be great if one module does this task.

Imagecache is the perfect module to handle all image modification in my oppinion and i would love to have this fuctionality. I tried to hack this module for a project but im not skilled enough :(

I unsuccessfully tried hacking the function imagecache_cache() by modifying the image before this line file_move($tmpdestination, $destination);

any ideas what i did wrong?

derjochenmeyer’s picture

rounded corners module (btw: now i got it working) is not easy to configure. And its tricky to add rounded corners to images.

The corners created by the rounded corners module are furhtermore not very pretty. Merging a transparents png could improve quality, improve usability.

zmove’s picture

+1 for rounded corner possibility with imagecache.

and +1 for a border possibility to these rounded corner (except if in css the border could follow the rounded corner).

sliiiiiide’s picture

I imagine this would be tricky to pull off, would look pretty awsome tho...

+1 from me

djerboa’s picture

I'd love to get it too! Sounds great!

celston’s picture

I was able to implement a solution for this but while I was working on it, it occurred to me that it might be more appropriate for imagecache to offer a hook for any additional actions that need to be added. See my feature request and patch here:

http://drupal.org/node/186285

Using the altered version, I created a module with the following code:

<?php

function imagecache_round_imagecache_actions( $op='list', $a2=array(), $a3=array() ) {
	switch ( $op ) {
		case 'list':
			return _imagecache_round_imagecache_actions_list();
		case 'form':
			return _imagecache_round_imagecache_actions_form( $a2, $a3 );
		case 'execute':
			_imagecache_round_imagecache_actions_execute( $a2, $a3 );
	}
}

function _imagecache_round_imagecache_actions_form( $function, $data ) {
	if ( $function == 'round' ) {
		$form = array();
		$form['topleft'] = array(
			'#type' => 'checkbox',
			'#title' => t('Top Left'),
			'#default_value' => $data['topleft'],
			'#return_value' => 1,
			'#description' => t('Check if you would like the top left corner rounded'),
		);
		$form['topright'] = array(
			'#type' => 'checkbox',
			'#title' => t('Top Right'),
			'#default_value' => $data['topright'],
			'#return_value' => 1,
			'#description' => t('Check if you would like the top right corner rounded'),
		);
		$form['bottomleft'] = array(
			'#type' => 'checkbox',
			'#title' => t('Bottom Left'),
			'#default_value' => $data['bottomleft'],
			'#return_value' => 1,
			'#description' => t('Check if you would like the bottom left corner rounded'),
		);
		$form['bottomright'] = array(
			'#type' => 'checkbox',
			'#title' => t('Bottom Right'),
			'#default_value' => $data['bottomright'],
			'#return_value' => 1,
			'#description' => t('Check if you would like the bottom right corner rounded'),
		);
		$form['radius'] = array(
			'#type' => 'textfield',
			'#title' => t('Width'),
			'#default_value' => $data['radius'],
			'#description' => t('Enter a radius of the rounded corner in pixels'),
		);

		return $form;
	}
}

function _imagecache_round_imagecache_actions_list() {
	return array(
		'round'		=> array(
			'name'		=> 'Round',
			'description'	=> t('<strong>Round</strong>: Add rounded corners of a given radius.'),
		),
	);
}

function _imagecache_round_imagecache_actions_execute( $action, $tmpdestination ) {
	if ( $action['data']['function'] == 'round' ) {
		$radius = $action['data']['radius'];
		$image = imagecreatefromjpeg( $tmpdestination );
		$size = getimagesize( $tmpdestination );
	
		$corner_source = imagecreatefrompng($_SERVER{'DOCUMENT_ROOT'}.'/'.drupal_get_path('module','imagecache_round').'/corner.png' );
		$corner_width = imagesx( $corner_source );
		$corner_height = imagesy( $corner_source );
		$corner = ImageCreateTrueColor( $radius, $radius );
		ImageCopyResampled( $corner, $corner_source, 0, 0, 0, 0, $radius, $radius, $corner_width, $corner_height );
	
		$white = ImageColorAllocate( $image, 255, 255, 255 );
		$black = ImageColorAllocate( $image, 0, 0, 0 );
	
		if ( $action['data']['topleft'] ) {
			$dest_x = 0;
			$dest_y = 0;
			imagecolortransparent( $corner, $black );
			imagecopymerge( $image, $corner, $dest_x, $dest_y, 0, 0, $radius, $radius, 100 );
		}
	
		if ( $action['data']['topright'] ) {
			$dest_x = $size[0] - $radius;
			$dest_y = 0;
			$rotated = imagerotate( $corner, 270, 0 );
			imagecolortransparent( $rotated, $black );
			imagecopymerge( $image, $rotated, $dest_x, $dest_y, 0, 0, $radius, $radius, 100 );
		}
	
		if ( $action['data']['bottomleft'] ) {
			$dest_x = 0;
			$dest_y = $size[1] - $radius;
			$rotated = imagerotate( $corner, 90, 0 );
			imagecolortransparent( $rotated, $black );
			imagecopymerge( $image, $rotated, $dest_x, $dest_y, 0, 0, $radius, $radius, 100 );
		}
	
		if ( $action['data']['bottomright'] ) {
			$dest_x = $size[0] - $radius;
			$dest_y = $size[1] - $radius;
			$rotated = imagerotate( $corner, 180, 0 );
			imagecolortransparent( $rotated, $black );
			imagecopymerge( $image, $rotated, $dest_x, $dest_y, 0, 0, $radius, $radius, 100 );
		}
	
		imagejpeg( $image, $tmpdestination );
	}
}

If I can get my changes to the original IC module, I'll post this as it's own (sub)module.

Dimm’s picture

You can create round rounded corners by this patch:
http://drupal.org/node/184816

dopry’s picture

Version: 5.x-1.x-dev » 6.x-2.x-dev

A suggestion for this would be a module that allows you to create 'Actions' and Upload images to be used for th edges or corners of a box... then it will store each action in the db with references to the images...

it will expose them to imagecache through the action hooks. and probably check if the actions are in use before allowing them to be created or deleted.

dman’s picture

Status: Active » Closed (fixed)

I'm pretty sure that this old issue is well-solved...
imagecache_actions is now providing rounded corners if you want it.

emix’s picture

nuthman’s picture

How did you manage to get the rounded_corners module working for images? It seems to round the border, but not the image..