我有一些尺寸为 340 x 170 的盒子,用户将上传需要显示在这些盒子中的图像;但是我失去了宽高比,总是装在盒子里 .
340 x 170
要求..
画布应始终为340 x 170
图像不能失去纵横比
如果图像的宽度大于高度,则宽度应尽可能宽到340px
同上到高处
应该始终能够在画布中看到整个图像
通常情况下,你只需要调整最大的一侧,但是这显然不会起作用,如果高度接近宽度,你最终会得到比170px更大的高度 .
你真正关心的是图像的纵横比和画布的纵横比之间的关系 .
这里有一些不言自明的代码(如果需要,很乐意添加解释):
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; }
还有另一种可用的方法,它在上传时调整大小,首先添加照片的html文件将包含表单
<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">
那么你需要一个文件名,例如resize.php包含这个代码
<?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"); } } } ?>
然后最后复制并调整文件picuploader.php中的大小如下
<?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); ?>
2 回答
你真正关心的是图像的纵横比和画布的纵横比之间的关系 .
这里有一些不言自明的代码(如果需要,很乐意添加解释):
还有另一种可用的方法,它在上传时调整大小,首先添加照片的html文件将包含表单
那么你需要一个文件名,例如resize.php包含这个代码
然后最后复制并调整文件picuploader.php中的大小如下