在一些SNS網站上常會有一些自訂頭像的功能，這裡介紹一個用PHP和jQuery實現自訂頭像的方法，需要的環境和前提如下：
1，PHP 需要 GD 2.0.1 或更高版本
2，jQuery庫
3，jQuery圖片處理外掛程式imgareaselect
其中imgareaselect外掛程式可以參考其官方網站：http://odyniec.net/projects/imgareaselect/ ，也可瀏覽本部落格的相關內容：jQuery的外掛程式imgAreaSelect，這裡介紹了設定 imgAreaSelect 外掛程式裡所有參數及其描述。
HTML頭需要引入的檔案:
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<head>
其中CSS檔案是jQuery的外掛程式imgAreaSelect壓縮包裡內建的CSS樣式，jquery.min.js 是jQuery庫檔案，jquery.imgareaselect.pack.js是imgareaselect外掛程式的檔案。
Javascript 代碼：
<script type="text/javascript">
function preview(img, selection) {
var scaleX = 100 / selection.width;//100指的是新圖的寬
var scaleY = 100 / selection.height;//100指的是新圖的高
$('#thumbnail img').css({
width: Math.round(scaleX * 800) + 'px', //800指的是原圖的寬
height: Math.round(scaleY * 600) + 'px', //600指的是原圖的高
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({ x1: 0, y1: 0, x2: 50, y2: 50, fadeSpeed:10,aspectRatio: '1:1', handles:"corners",onSelectChange: preview});
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
alert("image is null");
return false;
}else{
return true;
}
});
});
</script>
其中preview函數是當選擇的時候，有一個預覽的效果
HTML代碼：
<div style="float:left;" class="frame">
<img src="Water lilies.jpg" id="photo"/>
</div>
<div style="float:left; width: 100px; height: 100px;" id="thumbnail">
<div style="overflow: hidden; width: 100px; height: 100px;" id="preview">
<img src="Water lilies.jpg"/>
</div>
</div>
<div style="margin-top:10px;">
<form name="thumbnail" action="imgareaselect.php" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="upload_thumbnail" value="save thumb" id="save_thumb" />
</form>
</div>
PHP代碼：
$ifn = "Water lilies.jpg";
$ofn = "test_thumb.jpg";
$ext = strtoupper(end(explode('.',$ifn)));
if(is_file($ifn) && ($ext == "JPG" || $ext == "JPEG")){
$source = imagecreatefromjpeg($ifn);
}elseif(is_file($ifn) && $ext == "PNG"){
$source = imagecreatefromPNG($ifn);
}elseif(is_file($ifn) && $ext == "GIF"){
$source = imagecreatefromGIF($ifn);
}
$sourceWidth = imagesx($source);
$sourceHeight = imagesy($source);
$thumbWidth = $_POST['w'];
$thumbHeight = $_POST['h'];
$thumb = imagecreatetruecolor($thumbWidth, $thumbHeight);
$x1 = $_POST['x1'];
$y1 = $_POST['y1'];
$x2 = $_POST['x2'];
$y2 = $_POST['y2'];
imagecopyresampled($thumb,
$source,
0,
0,
$x1,
$y1,
$thumbWidth,
$thumbHeight,
$thumbWidth,
$thumbHeight
);
imagejpeg($thumb, $ofn);
這裡重點介紹一下imagecopyresampled函數相關資料，
說明：imagecopyresampled 重採樣拷貝部分映像並調整大小
原型：bool imagecopyresampled ( resource dst_image, resource src_image, int dst_x, int dst_y, int src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h )dst_image 和 src_image 分別是靶心圖表像和源映像的標識符。
其它：imagecopyresampled(靶心圖表像，源映像，存寬度，存高度，座標X，座標Y，源寬度，源高度) 如果成功則返回 TRUE，失敗則返回 FALSE。 imagecopyresampled() 將一幅映像中的一塊正方形地區拷貝到另一個映像中，平滑地插入像素值，因此，尤其是，減小了映像的大小而仍然保持了極大的清晰度。如果源和目標的寬度和高度不同，則會進行相應的映像收縮和展開。座標指的是左上方。本函數可用來在同一幅圖內部拷貝（如果 dst_image 和 src_image 相同的話）地區，但如果地區交迭的話則結果不可預知。
注意事項: 因為調色盤映像限制（255+1 種顏色）有個問題。重採樣或過濾映像通常需要多於 255 種顏色，計算新的被重採樣的像素及其顏色時採用了一種近似值。對調色盤映像嘗試分配一個新顏色時，如果失敗我們選擇了計算結果最接近（理論上）的顏色。這並不總是視覺上最接近的顏色。這可能會產生怪異的結果，例如空白（或者視覺上是空白）的映像。要跳過這個問題，請使用真彩色映像作為靶心圖表像，例如用 imagecreatetruecolor() 建立的。
版本要求: 本函數需要 GD 2.0.1 或更高版本（推薦 2.0.28 及更高版本）。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
