jQuery图像裁剪插件croppic

Html

<div id="cropContaineroutput"></div>
                    <input type="text" id="cropOutput" style="100%; padding:5px 4%; margin:20px auto; display:none; border: 1px solid #CCC;" />

<script>
    var croppicHeaderOptions = {
            //uploadUrl:'img_save_to_file',
            cropData:{
                "dummyData":1,
                "dummyData2":"asdas"
            },
            cropUrl:'img_crop_to_file',
            customUploadButtonId:'cropContainerHeaderButton',
            modal:false,
            processInline:true,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }   
    var croppic = new Croppic('croppic', croppicHeaderOptions);
    
    
    var croppicContainerModalOptions = {
            uploadUrl:'img_save_to_file',
            cropUrl:'img_crop_to_file',
            modal:true,
            imgEyecandyOpacity:0.4,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    // var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);
    
    
    var croppicContaineroutputOptions = {
            uploadUrl:'img_save_to_file',
            cropUrl:'img_crop_to_file', 
            outputUrlId:'cropOutput',
            modal:false,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    
    var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);
    
    var croppicContainerEyecandyOptions = {
            uploadUrl:'img_save_to_file',
            cropUrl:'img_crop_to_file',
            imgEyecandy:false,              
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    
    // var cropContainerEyecandy = new Croppic('cropContainerEyecandy', croppicContainerEyecandyOptions);
    
    var croppicContaineroutputMinimal = {
            uploadUrl:'img_save_to_file',
            cropUrl:'img_crop_to_file', 
            modal:false,
            doubleZoomControls:false,
            rotateControls: false,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    // var cropContaineroutput = new Croppic('cropContainerMinimal', croppicContaineroutputMinimal);
    
    var croppicContainerPreloadOptions = {
            uploadUrl:'img_save_to_file',
            cropUrl:'img_crop_to_file',
            loadPicture:'assets/img/night.jpg',
            enableMousescroll:true,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    // var cropContainerPreload = new Croppic('cropContainerPreload', croppicContainerPreloadOptions);
    
    
</script>

Php

public function img_save_to_file()
    {
        $imagePath = "Uploads/portrait/".date('Y-m').'/';
        if (!is_dir($imagePath))
        {
            mkdir(iconv("UTF-8", "GBK", $imagePath),0777,true);
        }  
        $allowedExts = array("gif", "jpeg", "jpg", "png", "GIF", "JPEG", "JPG", "PNG");
        $temp = explode(".", $_FILES["img"]["name"]);
        $extension = end($temp);
        
        //Check write Access to Directory

        if(!is_writable($imagePath)){
            $response = Array(
                "status" => 'error',
                "message" => 'Can`t upload File; no write Access'
            );
            print json_encode($response);
            return;
        }
    
        if ( in_array($extension, $allowedExts))
        {
          if ($_FILES["img"]["error"] > 0)
            {
                 $response = array(
                    "status" => 'error',
                    "message" => 'ERROR Return Code: '. $_FILES["img"]["error"],
                );            
            }
        else
            {
                
              $filename = $_FILES["img"]["tmp_name"];
              list($width, $height) = getimagesize( $filename );

              move_uploaded_file($filename,  $imagePath . $_FILES["img"]["name"]);
              $response = array(
                "status" => 'success',
                "url" => C('IMG_URl').$imagePath.$_FILES["img"]["name"],
                "width" => $width,
                "height" => $height
              );
              
            }
          }
        else
          {
           $response = array(
                "status" => 'error',
                "message" => 'something went wrong, most likely file is to large for upload. check upload_max_filesize, post_max_size and memory_limit in you php.ini',
            );
          }
        print json_encode($response);
    }

    public function img_crop_to_file()
    {
        $imgUrl = $_POST['imgUrl'];
        // original sizes
        $imgInitW = $_POST['imgInitW'];
        $imgInitH = $_POST['imgInitH'];
        // resized sizes
        $imgW = $_POST['imgW'];
        $imgH = $_POST['imgH'];
        // offsets
        $imgY1 = $_POST['imgY1'];
        $imgX1 = $_POST['imgX1'];
        // crop box
        $cropW = $_POST['cropW'];
        $cropH = $_POST['cropH'];
        // rotation angle
        $angle = $_POST['rotation'];

        $jpeg_quality = 100;

        $output_filename = "Uploads/portrait/".date('Y-m')."/croppedImg_".rand();

        // uncomment line below to save the cropped image in the same location as the original image.
        //$output_filename = dirname($imgUrl). "/croppedImg_".rand();

        $what = getimagesize($imgUrl);

        switch(strtolower($what['mime']))
        {
            case 'image/png':
                $img_r = imagecreatefrompng($imgUrl);
                $source_image = imagecreatefrompng($imgUrl);
                $type = '.png';
                break;
            case 'image/jpeg':
                $img_r = imagecreatefromjpeg($imgUrl);
                $source_image = imagecreatefromjpeg($imgUrl);
                error_log("jpg");
                $type = '.jpeg';
                break;
            case 'image/gif':
                $img_r = imagecreatefromgif($imgUrl);
                $source_image = imagecreatefromgif($imgUrl);
                $type = '.gif';
                break;
            default: die('image type not supported');
        }


        //Check write Access to Directory

        if(!is_writable(dirname($output_filename))){
            $response = Array(
                "status" => 'error',
                "message" => 'Can`t write cropped File'
            );    
        }else{

            // resize the original image to size of editor
            $resizedImage = imagecreatetruecolor($imgW, $imgH);
            imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH);
            // rotate the rezized image
            $rotated_image = imagerotate($resizedImage, -$angle, 0);
            // find new width & height of rotated image
            $rotated_width = imagesx($rotated_image);
            $rotated_height = imagesy($rotated_image);
            // diff between rotated & original sizes
            $dx = $rotated_width - $imgW;
            $dy = $rotated_height - $imgH;
            // crop rotated image to fit into original rezized rectangle
            $cropped_rotated_image = imagecreatetruecolor($imgW, $imgH);
            imagecolortransparent($cropped_rotated_image, imagecolorallocate($cropped_rotated_image, 0, 0, 0));
            imagecopyresampled($cropped_rotated_image, $rotated_image, 0, 0, $dx / 2, $dy / 2, $imgW, $imgH, $imgW, $imgH);
            // crop image into selected area
            $final_image = imagecreatetruecolor($cropW, $cropH);
            imagecolortransparent($final_image, imagecolorallocate($final_image, 0, 0, 0));
            imagecopyresampled($final_image, $cropped_rotated_image, 0, 0, $imgX1, $imgY1, $cropW, $cropH, $cropW, $cropH);
            // finally output png image
            //imagepng($final_image, $output_filename.$type, $png_quality);
            imagejpeg($final_image, $output_filename.$type, $jpeg_quality);
            $response = Array(
                "status" => 'success',
                "url" => C('IMG_URl').$output_filename.$type
            );
        }
        print json_encode($response);
    }