以下全部為手寫，禁止轉(zhuǎn)帖。
Jcorp是很好用的Jquery 截圖插件，兼容chrome firfox。
Demo地址是：http://code.ciaoca.com/jquery/jcrop/demo/
現(xiàn)在用Jcorp + php 實現(xiàn)截圖+上傳，從上面地址下載 js,css文件引入。如果沒有引入css則會出現(xiàn)選框無法移動，無邊框等情況。具體參數(shù)參考以上網(wǎng)址手冊。
我的初始化配置是這樣的

function initLogoJcrop(modal){
            //modal為彈層對象，
            modal.find('img.preview').Jcrop({
                //設(shè)置畫布寬度為568
                boxWidth:568,
                onChange:function(res){
                    //當(dāng)選框位置改變時記錄選框的值（實際尺寸）
                    // 這里時實際尺寸，這里是個坑，頁面顯示圖片和上傳圖片有可能不是一個尺寸
                    logoChangeLoc = this.tellSelect();
                    widgetSize = this.getBounds();
                    //console.log(widgetSize);
                    //console.log(logoChangeLoc);
                }
            },function(){
                jcrop_api = this;
                jcrop_api.animateTo([0,0,568,0]);
                jcrop_api.setOptions({ aspectRatio: 1/1 });
                jcrop_api.setOptions({ allowSelect: true });
                jcrop_api.setOptions({ allowMove: true });
                jcrop_api.setOptions({ allowResize: true });
                jcrop_api.setOptions({ trackDocument: false });
            });
        }

具體參數(shù)查看手冊，這里就不介紹了。當(dāng)實例化完插件后，當(dāng)觸發(fā)事件后，把圖片和截取圖片當(dāng)位置，圖片尺寸信息通過ajax上傳服務(wù)器。參數(shù)代碼如下：

            //驗證完圖片格式后，把參數(shù)都放到formdata中，widgetSize為數(shù)組，傳到服務(wù)器應(yīng)該是字符串，后端注意轉(zhuǎn)化，file為input.val();
            var formData = new FormData();
            formData.append('widgetSize',widgetSize);
            formData.append('file','');
            formData.append('imgSize',logoChangeLoc);

以下是php處理代碼，這里我不用類庫了，直接php原生寫給大家看。代碼如下:

          //判斷圖片格式
          //獲取參數(shù)
          //移動圖片到目錄
          move_uploaded_file($tmp,$filePath.$imgname);
          imggdAction($filePath.$imgname,$filePath,json_decode($size,true),$widgetSize);  //$size為截取圖片的尺寸位置信息，widgetSize為圖片真實尺寸

 function imggdAction($path,$filePath,$size,$widgetSize){
        $widgetSize = explode(',',$widgetSize);
        $sizeInfo = getimagesize($path);  //獲取圖片信息
        $imgWidth = $widgetSize[0];
        $imgHeight = $widgetSize[1];
        $mime = $sizeInfo['mime']; //類型
        $fileextArray = explode('/',$mime);
        $fileext = $fileextArray[1];  //圖片后綴
        $ext2functions = array(
            'jpg'  => 'imagecreatefromjpeg',
            'jpeg' => 'imagecreatefromjpeg',
            'png'  => 'imagecreatefrompng',
            'gif'  => 'imagecreatefromgif'
        );
        //獲取圖片資源
        $currentImg = call_user_func($ext2functions[$fileext], $path);

        //縮略圖真圖
        $dest_img = imagecreatetruecolor($imgWidth,$imgHeight);
        //生成縮略圖
        imagecopyresampled($dest_img, $currentImg, 0, 0, 0, 0, $imgWidth, $imgHeight, $imgWidth, $imgHeight);
        unlink($path); //刪除原圖
        imagedestroy($currentImg); //銷毀原圖
        // 調(diào)整默認(rèn)顏色
        $color = imagecolorallocate($dest_img, 255, 255, 255);
        imagefill($dest_img, 0, 0, $color);
        $imgname = time().rand(100,999).'.jpeg';
        //imagejpeg($dest_img,$filePath.$imgname,100);
        //裁剪
        //x：左上角x坐標(biāo)，y：左上角y坐標(biāo)，x2：右下角橫坐標(biāo)，y2:右下角縱坐標(biāo)，w截取圖片寬，h截取圖片高
        //生成截圖真圖
        $dest_img1 = imagecreatetruecolor($size['w'],$size['h']);
        //imagecopyresampled($dest_img, $currentImg, 0, 0, $x, $y, $width, $height, $w, $h);
        imagecopyresampled($dest_img1, $dest_img, 0, 0, $size['x'], $size['y'], $size['w'], $size['h'], $size['w'], $size['h']);
        $color = imagecolorallocate($dest_img1, 255, 255, 255);
        imagefill($dest_img1, 0, 0, $color);
        imagedestroy($dest_img); //銷毀縮略圖真圖
        $imgname = time().rand(100,999).'.jpeg';
        imagejpeg($dest_img1,$filePath.$imgname,100);
        imagedestroy($dest_img1); //截圖真圖
        return $filePath.$imgname;
    }