ajax圖片上傳剪下

允許使用者以AJAX的方式上傳圖片
·允許使用者選擇圖片的一定地區
·最後，提供一個裁減後圖片的下載地址

我們將要用到三個檔案

·index.php - 包含圖片上傳表單以及剪下介面
·upload.php - 提供上傳功能
·crop.php - 提供剪下功能

從技術角度看，流程如下所示：

1.使用者上傳檔案(index.php)
2.index.php將上傳的圖片POST到upload.php以處理上傳圖片程式，返回JSON資料包括圖片名，長和寬。
3.根據JSON裡的資料和innerHTML，我們將圖片放在頁面上
4.初始化javascript剪下工具
5.產生下載串連(crop.php)

讓我們來看看index.php

index.php是我們的主要檔案，使用者通過他來上傳和下載圖片。

我們需要YUI提供的以下幾個組件：
·yahoo-dom-event.js - 操作和解析DOM
·dragdrop - 基於圖片剪下工具
·element - 基於圖片剪下工具
·resize - 基於圖片剪下工具
·connection - 為AJAX請求, 此例通過AJAX上傳
·json - 解析JSON
·imagecropper - 我們最重要的工具

當然我們要用到 Yahoo combo handling並且加上上面提到的指令碼和樣式表：[code]<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.2/build/resize/assets/skins/sam/resize.css"
/>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.2/build/imagecropper/assets/skins/sam/imagecropper.css"
/>
<!-- js -->
<script type="text/javascript"
src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/dragdrop/dragdrop-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/resize/resize-beta-min.js&2.5.2/build/imagecropper/imagecropper-beta-min.js&2.
5.2/build/connection/connection-min.js&2.5.2/build/json/json-min.js"></script>
[/code]然後使用者一定會通過AJAX上傳圖片，所以我們在頁面上加一個表單。[code]<form action="upload.php"
enctype="multipart/form-data" method="post" name="uploadForm"
id="uploadForm">
        Image :
<input type="file" name="uploadImage" id="uploadImage" />
<input type="button" id="uploadButton" value="Upload"/>
</form>
[/code]點擊上傳按鈕來啟用上傳程式。[code]// add listeners
YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);[/code]同樣，我們也需要兩個容器：
·imageContainer - 將包含我們上傳的圖片
·downloadLink - 將包含下載串連[code]<div id="imageContainer"></div>
<div id="downloadLink"></div>
[/code]兩個容器事後將通過innerHTML更新

AJAX上傳
對於AJAX的上傳，請參見Code Central上的教程

強烈推薦此教程，我下載了範例程式碼，根據自己的需要改動了一點點，最後我搞了一個非常不錯的JSON對象[uploader]，它只有一個方法 carry。後者只是提交表單資料到一個指定的URL。[code]uploader = {
        carry: function(){
                // set form
                YAHOO.util.Connect.setForm('uploadForm', true);
                // upload image
                YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
                        upload: function(o){
                                // parse our json data
                                var jsonData = YAHOO.lang.JSON.parse(o.responseText);

                                // put image in our image container

                            
YAHOO.util.Dom.get('imageContainer').innerHTML = '<img id="yuiImg"
src="' + jsonData.image + '" width="' + jsonData.width + '" height="' +
jsonData.height + '" alt="" />';

                                // init our photoshop
                                photoshop.init(jsonData.image);

                                // get first cropped image
                                photoshop.getCroppedImage();
                        }
                });
        }
};
[/code]當上傳完成，我們得到早前提到過的JSON資料。[code]{"image" : "images/myimage.jpg", "width" : "500", "height" : 400}
[/code]此資料和我們用來放置圖片的容器imageContainer將以yuiImg作為id[code]YAHOO.util.Dom.get
('imageContainer').innerHTML = '<img id="yuiImg" src="' +
jsonData.image + '" width="' + jsonData.width + '" height="' +
jsonData.height + '" alt="" />';[/code]指定圖片的長和寬是非常重要的，除非圖片剪下工具工作不正常。
下面我們將執行個體化另一個JSON對象photoshop，我們一起來看看。

我們的photoshop對象[code]photoshop = {
        image: null,
        crop: null,

        init: function(image){
                // set our image
                photoshop.image = image;

                // our image cropper from the uploaded image
                photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');
                photoshop.crop.on('moveEvent', function() {
                        // get updated coordinates
                        photoshop.getCroppedImage();
                });
        },

        getCroppedImage: function(){
                var coordinates = photoshop.getCoordinates();

              var url = 'crop.php?image=' + photoshop.image +
'&cropStartX=' + coordinates.left +'&cropStartY=' +
coordinates.top +'&cropWidth=' + coordinates.width
+'&cropHeight=' + coordinates.height;
              
YAHOO.util.Dom.get('downloadLink').innerHTML = '<a href="' + url +
'">download cropped image</a>';               

        },

        getCoordinates: function(){
                return photoshop.crop.getCropCoords();
        }
};
[/code]這個初始化方法初始化了yuiImg[code]photoshop.crop = new
YAHOO.widget.ImageCropper('yuiImg');[/code]我們同樣要聲明moveEvent方法，每當這個圖片被移動或是被調整大小，我們就調用getCroppedImage這個方法來更新下載串連。[code]photoshop.crop.on
('moveEvent', function() {
        // get updated coordinates
        photoshop.getCroppedImage();
});
[/code]getCroppedImage方法將產生裁減後的圖片地址。在PHP裡實現，我們需要
·要處理的圖片
·X，Y軸的座標
·裁減後的圖片長和寬

幸運的是，YUI的剪下工具裡有一個方法滿足了我們的需要，它就是getCropCoords()方法。所以，無論什麼時候調用getCroppedImage方法，我們取到剪下圖片的座標，然後產生一個下載串連。[code]// get coordinates
var coordinates = photoshop.getCoordinates();

// build our url
var
url = 'crop.php?image=' + photoshop.image + '&cropStartX=' +
coordinates.left +'&cropStartY=' + coordinates.top
+'&cropWidth=' + coordinates.width +'&cropHeight=' +
coordinates.height;

// put download link in our page
YAHOO.util.Dom.get('downloadLink').innerHTML = '<a href="' + url + '">download cropped image</a>';
[/code]index.php的所有內容就在這裡了。

upload.php[code]
          if ($ext == "jpg") {
                      // generate unique file name
                  $newName = 'images/'.time().'.'.$ext;

                  // upload files
                if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {

                        // get height and width for image uploaded
                        list($width, $height) = getimagesize($newName);

                        // return json data
                           echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
                }
                else {
                           echo '{"error" : "An error occurred while moving the files"}';
                }
          }
          else {
                     echo '{"error" : "Invalid image format"}';
          }
}
[/code]upload.php就像它寫的那樣，只解析jpg格式的圖片，然後產生一個唯一的檔案名稱，置於images的檔案夾內，最後產生DOM可操作的JSON資料。當然images檔案夾要設定為可讀寫。

crop.php[code]// get variables
$imgfile = $_GET['image'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];

// Create two images
$origimg = imagecreatefromjpeg($imgfile);
$cropimg = imagecreatetruecolor($cropW,$cropH);

// Get the original size
list($width, $height) = getimagesize($imgfile);

// Crop
imagecopyresized($cropimg, $origimg, 0, 0, $cropStartX, $cropStartY, $width, $height, $width, $height);

// force download nes image
header("Content-type: image/jpeg");
header('Content-Disposition: attachment; filename="'.$imgfile.'"');
imagejpeg($cropimg);

// destroy the images
imagedestroy($cropimg);
imagedestroy($origimg);
[/code]我們可以通過crop.php剪下上傳的圖片。首先我們得到所有的通過AJAX傳遞給我們的變數。[code]// get variables
$imgfile = $_GET['image'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];
[/code]我們建立兩個圖片，原始圖片和剪下了的圖片，通過imagecopyresized方法來產生剪下圖片。我們加入兩個頭部資訊，一個告訴遊覽器這是一個圖片，另一個是儲存圖片的對話方塊。