I spent a whole day trying to get my Image control to work properly on the form. I noticed that, with the code suggested, the image would always display “streched” to whatever the imageSize of the image control was. So, for example, if you had a landscape jpg, but the control had equal height and width, the uploaded image would display as a square and loose its proportions.
NOT only, but every time the image was loaded it would be loaded at its full size but displayed at a fraction of its real size (the size of the image control).
SO I humbly submit my solution, based on the following premesis:
the image on the form is 200 x 200 (you can change in the defines at the top of the code)
This code does the following:
it uploads the image, with a filename created using a uid() and saves it in the PIC_DIR defined
it creates a thumbnail of the image, 200 x 200 (or whatever is specified in the defines).
the thumbnail is padded to its dimensions by white space, in order NOT to loose the image proportions
only the thumbnail is sent back to the form, saving enormously on bandwith.
IMPORTANT:
Install the PHP GD libary
Make sure your MAX_UPLOAD par in php.ini is set to an appropriate size (I upped mine to 8MB) to cover the size of the original large uploaded images.
I Hope this helps someone!!
image contol definition on form:
, {type:'image', url:'picHandler.php', name:'pic', position:'absolute', inputTop:7, inputLeft: 400
, inputWidth: 200, inputHeight: 200
picHandler.php
[code]<?php
define(“PIC_DIR”, “./pics/”);
define(“MAX_THUMB_H”, 200);
define(“MAX_THUMB_W”, 200);
const IMAGE_HANDLERS = [
IMAGETYPE_JPEG => [
‘load’ => ‘imagecreatefromjpeg’,
‘save’ => ‘imagejpeg’,
‘quality’ => 100
],
IMAGETYPE_PNG => [
‘load’ => ‘imagecreatefrompng’,
‘save’ => ‘imagepng’,
‘quality’ => 0
],
IMAGETYPE_GIF => [
‘load’ => ‘imagecreatefromgif’,
‘save’ => ‘imagegif’
]
];
switch($_REQUEST[“action”]) {
case “loadImage”: getPic($_REQUEST); break;
case “uploadImage”: setPic($_REQUEST); break;
}
function getPic($pars) {
if ($pars["action"]!="loadImage") return;
if (($id = $pars["itemValue"])=="") return;
$fname = PIC_DIR . $id . "_t.jpg";
if (file_exists($fname)) {
header("Content-Type: image/jpg");
print_r(file_get_contents($fname));
}
}
function setPic($pars) {
$fnOrig = $_FILES["file"]["name"];
$ext = strtolower(explode(".",$fnOrig)[1]);
$uid = uniqid();
$fnNew = PIC_DIR . $uid . "." . $ext;
$thumb = PIC_DIR . $uid . "_t." . $ext;
move_uploaded_file($_FILES["file"]["tmp_name"], $fnNew);
$type = exif_imagetype($fnNew);
if (!$type || !IMAGE_HANDLERS[$type])
return;
// load the image with the correct loader
$image = call_user_func(IMAGE_HANDLERS[$type]['load'], $fnNew);
if (!$image) {
return();
}
$width = imagesx($image);
$height = imagesy($image);
// get width to height ratio
$ratio = $width / $height;
if ($width > $height) {
$thumbW = MAX_THUMB_W;
$thumbH = floor($height / $width * MAX_THUMB_W);
} else {
$thumbH = MAX_THUMB_H;
$thumbW = floor($width / $height * MAX_THUMB_H);
}
// create duplicate image based on calculated target size
$thumbnail = imagecreatetruecolor(MAX_THUMB_W, MAX_THUMB_H);
// set transparency options for GIFs and PNGs
if ($type == IMAGETYPE_GIF || $type == IMAGETYPE_PNG) {
imagecolortransparent(
$thumbnail,
imagecolorallocate($thumbnail, 0, 0, 0)
);
if ($type == IMAGETYPE_PNG) {
imagealphablending($thumbnail, false);
imagesavealpha($thumbnail, true);
}
} else {
// thumbnail background white, change at will
$bg= imagecolorallocate($thumbnail, 255, 255, 255);
imagefill($thumbnail, 0, 0, $bg);
}
$dx = floor((200 -$thumbW)/2);
$dy = floor((200 -$thumbH)/2);
imagecopyresampled(
$thumbnail,
$image,
$dx, $dy, 0, 0,
$thumbW, $thumbH,
$width, $height
);
// save the duplicate version of the image to disk
$ret = call_user_func(
IMAGE_HANDLERS[$type]['save'],
$thumbnail,
$thumb,
IMAGE_HANDLERS[$type]['quality']
);
if ($ret==1) {
header("Content-Type: text/html; charset=utf-8");
print_r("{state: true, itemId: '".$pars["itemId"]."', itemValue: '".$uid."'}");
}
}
?>[/code]