jQuery图像裁剪插件croppic

<div id="cropContaineroutput"></div> ???????????????????<input type="text" id="cropOutput" style="width: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>

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); ???}