PHP+jQuery+jCrop線上下傳裁剪頭像(內含源碼)

PHP+jQuery+jCrop線上上傳裁剪頭像(內含源碼)

源碼裡面使用到兩個開源的jQuery外掛程式：其一是Ajax上傳用的是uploadify，這個上傳外掛程式比較牛逼，並且可以自訂的東西也比較多，demo裡面我用的不完善，沒有把項目裡面用到的取消上傳和刪除功能加上，同樣也可以使用其他不需要使用Flash的jQuery上傳外掛程式。其二是jQuery jCrop，用於裁剪已經上傳好的圖片。

?服務端我寫了3個PHP檔案，config.inc.php包含兩個公用函數，唯一一個可以需要配置的是上傳後的圖片會被壓縮為寬高不超過500px(預設)的小圖後再供前台調用，因為如果使用者上傳比較大的圖片的話不僅僅要佔用比較多的儲存空間，大圖裁剪還會給伺服器帶來額外的壓力。

function resize( $ori ){    if( preg_match('/^http:\/\/[a-zA-Z0-9]+/', $ori ) ){        return $ori;    }    $info = getImageInfo( ROOT_PATH . $ori );    if( $info ){        //上傳圖片後切割的最大寬度和高度        $width = 500;        $height = 500;        $scrimg = ROOT_PATH . $ori;        if( $info['type']=='jpg' || $info['type']=='jpeg' ){            $im = imagecreatefromjpeg( $scrimg );        }        if( $info['type']=='gif' ){            $im = imagecreatefromgif( $scrimg );        }        if( $info['type']=='png' ){            $im = imagecreatefrompng( $scrimg );        }        if( $info['width']<=$width && $info['height']<=$height ){            return;        } else {            if( $info['width'] > $info['height'] ){                $height = intval( $info['height']/($info['width']/$width) );            } else {                $width = intval( $info['width']/($info['height']/$height) );            }        }        $newimg = imagecreatetruecolor( $width, $height );        imagecopyresampled( $newimg, $im, 0, 0, 0, 0, $width, $height, $info['width'], $info['height'] );        imagejpeg( $newimg, ROOT_PATH . $ori );        imagedestroy( $im );    }    return;}

?另外兩個檔案upload.php和resize.php分別用於前端Ajax請求圖片的上傳和裁剪。需要說明的是在resize.php會把第一步上傳壓縮好的圖片裁剪後複製為N張圖片，用於產生不同大小的頭像，如果需求只需要一張圖片，並且不需要保留原圖的，直接在原圖上修改即可，這樣會節省很多資源。最好強調：圖片處理使用GD庫，不過推薦使用imagick。

