- html
- <div id="cropContaineroutput"></div>
- <input type="text" id="cropOutput" style="width:100%; padding:5px 4%; margin:20px auto; display:none; border: 1px solid #CCC;" />
- Js
- <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);
- }
来源: http://www.bubuko.com/infodetail-2492476.html