I have some boxes that have the dimensions of 340 x 170 and users will be uploading images that need to be displayed into these boxes; however I'm not really sure how to go about resizing them so they don't lose aspect ratio and always fit in the box.
Requirements..
Normally you would just resize by the largest side, however this obviously won't work as then you will end up with a larger height than 170px if the height is close to the width.
What you really care about is the relationship between the image's aspect ratio and the canvas' aspect ratio.
Here's some self-explanatory code (would be glad to add explanation if needed):
var imgRatio = img.width / img.height; // Image aspect ratio
var canvasRatio = canvas.width / canvas.height; // Canvas aspect ratio
var resultImageH, resultImageW; // Variables that hold the result of the sizing algorithm
if(imgRatio < canvasRatio) {
resultImageH = canvas.height;
resultImageW = resultImageH * imgRatio;
}
else {
resultImageW = canvas.width;
resultImageH = resultImageW / imgRatio;
}
there is another way available with php it does the resizing while uploading , first the html file to add the photo will contain form
<form name="form1" enctype="multipart/form-data" method="post" action="picuploader.php">
<input name="imgFile" type="file" />
<input type="submit" name="button" id="button" value="ADD NEW PIC">
then you need a file name it for example resize.php contain this code
<?php
class thumbnail
{
var $img;
function thumbnail($imgfile)
{
//detect image format
$this->img["format"]=ereg_replace(".*\.(.*)$","\\1",$imgfile);
$this->img["format"]=strtoupper($this->img["format"]);
if ($this->img["format"]=="JPG" || $this->img["format"]=="JPEG") {
//JPEG
$this->img["format"]="JPEG";
$this->img["src"] = ImageCreateFromJPEG ($imgfile);
} elseif ($this->img["format"]=="PNG") {
//PNG
$this->img["format"]="PNG";
$this->img["src"] = ImageCreateFromPNG ($imgfile);
} elseif ($this->img["format"]=="GIF") {
//GIF
$this->img["format"]="GIF";
$this->img["src"] = ImageCreateFromGIF ($imgfile);
} elseif ($this->img["format"]=="WBMP") {
//WBMP
$this->img["format"]="WBMP";
$this->img["src"] = ImageCreateFromWBMP ($imgfile);
} else {
//DEFAULT
//echo "Not a Supported File";
exit();
}
@$this->img["imgWidth"] = imagesx($this->img["src"]);
@$this->img["imgHeight"] = imagesy($this->img["src"]);
//default quality jpeg
$this->img["quality"]=200;
}
function size_height($size=150)
{
//height
$this->img["imgHeight_thumb"]=$size;
@$this->img["imgWidth_thumb"] = ($this->img["imgHeight_thumb"]/$this->img["imgHeight"])*$this->img["imgWidth"];
}
function size_width($size=340)
{
//width
$this->img["imgWidth_thumb"]=$size;
@$this->img["imgHeight_thumb"] = ($this->img["imgWidth_thumb"]/$this->img["imgWidth"])*$this->img["imgHeight"];
}
function size_auto($size=200)
{
//size
if ($this->img["imgWidth"]>=$this->img["imgHeight"]) {
$this->img["imgWidth_thumb"]=$size;
@$this->img["imgHeight_thumb"] = ($this->img["imgWidth_thumb"]/$this->img["imgWidth"])*$this->img["imgHeight"];
} else {
$this->img["imgHeight_thumb"]=$size;
@$this->img["imgWidth_thumb"] = ($this->img["imgHeight_thumb"]/$this->img["imgHeight"])*$this->img["imgWidth"];
}
}
function jpeg_quality($quality=200)
{
//jpeg quality
$this->img["quality"]=$quality;
}
function show()
{
//show thumb
@Header("Content-Type: image/".$this->img["format"]);
/* change ImageCreateTrueColor to ImageCreate if your GD not supported ImageCreateTrueColor function*/
$this->img["des"] = ImageCreateTrueColor($this->img["imgWidth_thumb"],$this->img["imgHeight_thumb"]);
@imagecopyresized ($this->img["des"], $this->img["src"], 0, 0, 0, 0, $this->img["imgWidth_thumb"], $this->img["imgHeight_thumb"], $this->img["imgWidth"], $this->img["imgHeight"]);
if ($this->img["format"]=="JPG" || $this->img["format"]=="JPEG") {
//JPEG
imageJPEG($this->img["des"],"",$this->img["quality"]);
} elseif ($this->img["format"]=="PNG") {
//PNG
imagePNG($this->img["des"]);
} elseif ($this->img["format"]=="GIF") {
//GIF
imageGIF($this->img["des"]);
} elseif ($this->img["format"]=="WBMP") {
//WBMP
imageWBMP($this->img["des"]);
}
}
function save($save="")
{
//save thumb
if (empty($save)) $save=strtolower("./thumb.".$this->img["format"]);
/* change ImageCreateTrueColor to ImageCreate if your GD not supported ImageCreateTrueColor function*/
$this->img["des"] = ImageCreateTrueColor($this->img["imgWidth_thumb"],$this->img["imgHeight_thumb"]);
@imagecopyresized ($this->img["des"], $this->img["src"], 0, 0, 0, 0, $this->img["imgWidth_thumb"], $this->img["imgHeight_thumb"], $this->img["imgWidth"], $this->img["imgHeight"]);
if ($this->img["format"]=="JPG" || $this->img["format"]=="JPEG") {
//JPEG
imageJPEG($this->img["des"],"$save",$this->img["quality"]);
} elseif ($this->img["format"]=="PNG") {
//PNG
imagePNG($this->img["des"],"$save");
} elseif ($this->img["format"]=="GIF") {
//GIF
imageGIF($this->img["des"],"$save");
} elseif ($this->img["format"]=="WBMP") {
//WBMP
imageWBMP($this->img["des"],"$save");
}
}
}
?>
then finally the copy and resizing in the file picuploader.php as follow
<?php
$uploaddir = "uploading_pah";
$uploadfile = $uploaddir ."/". basename($_FILES['imgFile']['name']);
$fileSaved = move_uploaded_file($_FILES['imgFile']['tmp_name'], $uploadfile);
$upicThName = $uploaddir ."/TH_". basename($_FILES['imgFile']['name']);
include_once("resize.php");
$picTh = copy($uploadfile, $upicThName);
$upicThName = $upicThName;
$thumb=new thumbnail($upicThName);
$thumb->size_width(340);
$thumb->save($upicThName);
list($width, $height) = getimagesize($upicThName);
if($height > 170)
{
$thumb->size_height(170);
$thumb->save($upicThName);
}
unlink($uploadfile);
?>