Image Resizing Bean

[ahmad]

Can anybody point me where I can get a bean for image resizing to use in servoy?

We are developing a Digital Management system which allows to store images and other media.

Actually the image and other media files are stored in a seperate folder and servoy just display it using the reference

The idea is when the user loads an image we should automatically resize it to different dimension for certain purpose.

There should be a way where we can specify the height and width so that the bean resizes accordingly..

Awaiting for some help on this
Thanks
Ahmad

[maarten]

Would this be an option?

1) create a button with the desired size and attach the image to it, using the path reference.
2) use the thumbnailer method to create a temp image according to the button size.


//set the image in the button by url
elements.thumbnailButton.setImageURL('path/companyLogo.jpg');
//Get the image data in jpg format from icon
var jpgData = elements.thumbnailButton.getThumbnailJPGImage();
application.writeFile("mypicture.jpg", jpgData);

[ahmad]

Hi Maarten,

Thanks for the reply.. But I don't want to have a fixed size for all the images.

If I set a size say (w=500 h=450) what will happen to an image which is just 300px in width and 200px in height?? Won't it get stretched?? Or if try to compress a big image I think it would be the same problem.

Below here I attached the PHP code which I use for resizng an image based on the calculation. The same thing I want't to achieve in Servoy too.

What I do here I will define the max ht and width. After getting size (w,h) of the image the function will check

+ whether the ht is > width and also exceeds the max ht. If so it will resize the image with the max ht specified and change the width proportionally.

+ similarly if the width is > ht and also exceeds the max width then it will resize the image with the max width specified and change the height proportionally.

I think I'm explaining properly. If not pls let me know

Thanks
Ahmad
Hong Kong

<?

// *******************************************************

//---------------------------- Reszing Function --------------------

function imageCreateThumb($src,$dest,$maxWidth,$maxHeight,$quality=100) {


if (file_exists($src) && isset($dest)) {
// path info
$destInfo = pathInfo($dest);
$imageDetails = getimagesize($src);

$imageSizeX = $imageDetails[0];
$imageSizeY = $imageDetails[1];
$imageType = $imageDetails[2];

$thumbSizeX = $maxWidth;
$thumbSizeY = $maxHeight;

// The two lines beginning with (int) are the super important magic formula part.
(int)$thumbX = ($imageSizeX <= $imageSizeY) ? round(($imageSizeX * $thumbSizeY)/$imageSizeY) : $thumbSizeX;
(int)$thumbY = ($imageSizeX > $imageSizeY) ? round(($imageSizeY * $thumbSizeX)/$imageSizeX) : $thumbSizeY;

// path rectification
if ($destInfo['extension'] == "gif") {
$dest = substr_replace($dest, 'jpg', -3);
}

// true color image, with anti-aliasing
$destImage = imageCreateTrueColor($thumbX, $thumbY) or die ("Cannot Initialize new GD image stream");
imageAntiAlias($destImage,true);

// src image
switch ($imageType) {
case 1: //GIF
$srcImage = imageCreateFromGif($src);
break;

case 2: //JPEG
$srcImage = imageCreateFromJpeg($src);
break;

case 3: //PNG
$srcImage = imageCreateFromPng($src);
break;

default:
return false;
break;
}

// resampling
imageCopyResampled($destImage, $srcImage, 0, 0, 0, 0, $thumbX, $thumbY, $imageSizeX, $imageSizeY);

// generating image
switch ($imageType) {
case 1:
case 2:
imageJpeg($destImage, $dest, $quality);
break;

case 3:
imagePng($destImage, $dest);
break;
}
return true;
}
else {
return false;
}

}


// **********************************************************

//---------------------------- Reszing Images Starts Here --------------------

$TempFolder = realpath("Data/ProductImages/Temp/");
$FileNamesArray = WriteFolderFilesToArray($TempFolder);

if ($FileNamesArray != "" ){
foreach ($FileNamesArray as $key => $FileName) {

//************** THUMB IMAGE CREATION *********************
$DestFolder = "Data/ProductImages/Thumb";
$SourceFile = realpath($TempFolder . "/" . $FileName);
$DestFile = realpath($DestFolder . "/" . $FileName);
$maxWidth = 100;
$maxHeight = 80;

imageCreateThumb($SourceFile, $DestFile, $maxWidth, $maxHeight);


//************** NORMAL IMAGE CREATION *********************
$DestFolder = "Data/ProductImages/Normal";
$SourceFile = realpath($TempFolder . "/" . $FileName);
$DestFile = realpath($DestFolder . "/" . $FileName);
$maxWidth = 200;
$maxHeight = 200;

imageCreateThumb($SourceFile, $DestFile, $maxWidth, $maxHeight);

//************** BIG IMAGE CREATION *********************
$DestFolder = "Data/ProductImages/Big";
$SourceFile = realpath($TempFolder . "/" . $FileName);
$DestFile = realpath($DestFolder . "/" . $FileName);
$maxWidth = 500;
$maxHeight = 500;

imageCreateThumb($SourceFile, $DestFile, $maxWidth, $maxHeight);


}
}



?>

[maarten]

Thanks for the reply.. But I don't want to have a fixed size for all the images.

you can set the size of your "template" before setting the image
elements.thumbnailButton.setSize(200, 200)

If I set a size say (w=500 h=450) what will happen to an image which is just 300px in width and 200px in height??

A far as I tested, it will keep it's original size.

Or if try to compress a big image I think it would be the same problem.

It will shrink your image.
Also check out the media Options property of a button.
(reduce enlarge, keep aspect ratio etc..)

[david]

Can anybody point me where I can get a bean for image resizing to use in servoy?

Here's a utility I use with website development:

http://www.imagemagick.org/

You could get this to work currently from Servoy using applescript or vbscript. Not the most portable of solutions (a bean with this functionality would be ideal) but if you need the power it might be worth taking a look at.

- david