调整图像大小，使其适合特定大小的画布并保持纵横比

Question

我有一些尺寸为340 x 170 的框，用户将上传需要显示到这些框的图像；但是我不确定如何调整它们的大小，这样它们就不会失去纵横比并且总是适合盒子。

要求..

• 画布应始终为 340 x 170
• 图片不能丢失纵横比
• 如果图像的宽度大于高度，则应尽可能宽到 340 像素
• 高度同上
• 应该始终能够在画布中看到整个图像

通常您只需调整最大边的大小，但这显然行不通，因为如果高度接近宽度，您最终会得到大于 170px 的高度。

Answer 1

你真正关心的是图像的纵横比和画布的纵横比之间的关系。

这是一些不言自明的代码（如果需要，很乐意添加解释）：

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;
}

Answer 2

php还有另一种方法，它在上传时调整大小，首先添加照片的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);
?>