Merhaba arkadaşlar sizlere bugün Jquery php ile resim croplama başıma çok dert olan bir kodlamayı çözümü örnekleyeceğim.
Bir firmanız var ve sizden bir resmi zoom yapmayı ve croplamayı istiyor varsayalım, php kodları ile bunu tam olarak sağlamak mümkün olmayabiliyor. Resmin x,y kordinatları widht x height derken çorba gibi olabiliyor. Bunu çözmek adına internette araştırmalar düzinelerce kütühaneler yazmama olmadığı halde php ile entegrasyonu sağladığımı jquery kütüphaleneleri ile boğuştum.
Uzun arayışlar ve testlerden sonra jquery’nin croppic kütüphanesi ile karşılaştım gayet güzel ve anlatımı sade tutan bir yapısı vardı deneyelim bunuda dedik :). Denemeler ve entegrasyon sonrasında hoşuma gitti. Sizlere örnek kodları ve bir kısım açıklamasını atıcam ama biraz ingilizcesi olan bir arkadaş bile burdaki yapıyı hemen anlayacaktır eminimki. Şimdi gelelim Jquery php ile resim croplama işlemlerine
CSS Kodları
[css]
/* HeaderWrap */
#headerwrap {
background-color: #52B1E7;
margin-top:68px;
background-attachment: relative;
background-position: center center;
min-height: 430px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(../img/headerBg.jpg);
background-attachment:fixed;
}
.logoHeader{
font-family: ‘Mrs Sheppards’, cursive;
font-size: 145px;
line-height: 31px;
margin: 105px 0 7px;
color: #FFF;
display: block;
position: relative;
z-index: 1;
text-shadow: 8px 8px 0px rgba(0,0,0,0.1);
text-align: center;
width: 430px;
}
#headerwrap h2 {
margin-top: 82px;
margin-bottom: 28px;
opacity: 0.8;
color: rgb(255, 255, 255);
font-size: 33px;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
text-align: center;
width: 430px;
font-weight: 300;
letter-spacing: 1px;
}
.logoImg{
width: 130px;
margin: 0 145px 7px;
}
.downloadButton{
color: #FFFFFF;
margin: 10px 10px;
padding: 20px 50px;
width: 408px;
display: none;
text-align: center;
font-weight: 300;
background: transparent;
border-radius: 3px;
font-size: 38px;
}
.downloadButton sup{
font-family: ‘Lato’, sans-serif;
font-size:15px;
}
.cropHeaderWrapper{
overflow:hidden;
height: 420px;
}
#cropContainerHeaderButton{
color: #FFF;
margin: 10px 0 30px 71px;
padding: 15px 50px;
width: 407px;
display: block;
text-align: center;
font-weight: 400;
background: #2CE987;
text-transform: uppercase;
border-radius: 2px;
box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
font-size: 20px;
}
#cropContainerHeaderButton:hover {
background: #1CD139;
}
.optionsDiv{
border-radius:2px;
position:absolute;
}
.optionsDiv a{
width:50%;
margin-right:20%;
float:left;
margin-bottom:10px;
cursor:pointer;
}
#optionsFloating.fixed{
position:fixed;
top:100px;
}
.downloadLink{
font-size: 22px;
color: #666;
text-align: center;
display: block;
width: 320px;
width: 320px;
padding: 10px;
border: 1px solid #CCC;
height: 62px;
margin: 0 auto;
}
.downloadLink:hover {
background:#FFF;
}
.downloadIcon{
width:75px;
height:75px;
display:block;
background-size:75px 150px;
background-position:0px 0px;
background-image: url(../img/downloadIcon.png);
}
.downloadLink:hover .downloadIcon{
background-position:0px -75px;
}
.downloadIcon.small{
width:25px;
height:25px;
display:block;
background-size:25px 50px;
background-position:0px 0px;
background-image: url(../img/downloadIcon.png);
}
.downloadLink:hover .downloadIcon.small{
background-position:0px -25px;
}
.downloadLink .downloadIcon {
float:left;
}
.downloadLink span{
line-height: 40px;
float:left;
}
#cropContaineroutput{ width:100%; height:145px; position: relative; border:1px solid #ccc;}
#web_by {position:absolute; right:10px; font-size:10px; color:#aaa; padding:13px; cursor:pointer; }
#web_by label{ display:none; position:absolute; right:5px; top:-32px; z-index:10000; font-size:10px; color:#ffa200; padding:10px 9px; cursor:pointer; width:60px; height:40px; background-image:url(‘../img/jobotic_bubble.png’); background-repeat:no-repeat; }
#jobotic {position:fixed; right:-100px; bottom:-3px; font-size:10px; color:#aaa; padding:13px; cursor:pointer; z-index:9999;}
#kontakt { float:left; width:100%; height:auto; z-index:450; position:relative; }
#kontakt_bg { position:absolute; top:0; left:0; width:100%; height:auto; z-index:450;}
#copyright {float:left; width:100%; height:45px; background-color:#FFF; margin-top:6px;}
#copyright p{float:left; width:100%; font-size:12px; color:#999; text-align:center; background-color:#FFF; margin-top:10px;}
[/css]
[html]
<div class="col-lg-4 ">
<h4 class="centered"> OUTPUT </h4>
<p class="centered">( display url after cropping )</p>
<div id="cropContaineroutput"></div>
<input type="text" id="cropOutput" style="width:100%; padding:5px 4%; margin:20px auto; display:block; border: 1px solid #CCC;" />
</div>
[/html]
script kodu bu kod ile yükleme kaydetme ve croplanan resmi kaydetmek için gerekli olan kodlarınız
[javascript]
var croppicContaineroutputOptions = {
uploadUrl:’img_save_to_file.php’,
cropUrl:’img_crop_to_file.php’,
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);
[/javascript]
[php]
/*
* Resim croplamak için kullanılan bölüm
* !!! THIS IS JUST AN EXAMPLE !!!, PLEASE USE ImageMagick or some other quality image processing libraries
*/
$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 = "temp/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" => $output_filename.$type
);
}
print json_encode($response);
[/php]
[php]
/*
* Resim kaydetme
* !!! THIS IS JUST AN EXAMPLE !!!, PLEASE USE ImageMagick or some other quality image processing libraries
*/
$imagePath = "temp/";
$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" => $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);
[/php]
Gerekli olan kütüphane
[javascript]
/*
* CROPPIC
* dependancy: jQuery
* author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
*/
!function(o,t){Croppic=function(o,t){var e=this;e.id=o,e.obj=$("#"+o),e.outputDiv=e.obj,e.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customUploadButtonId:"",loaderHtml:"",scaleToFill:!0,processInline:!1,loadPicture:"",onReset:null,enableMousescroll:!1,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in t)e.options[i]=t[i];e.init()},Croppic.prototype={id:"",imgInitW:0,imgInitH:0,imgW:0,imgH:0,objW:0,objH:0,actualRotation:0,windowW:0,windowH:$(o).height(),obj:{},outputDiv:{},outputUrlObj:{},img:{},defaultImg:{},croppedImg:{},imgEyecandy:{},form:{},iframeform:{},iframeobj:{},cropControlsUpload:{},cropControlsCrop:{},cropControlZoomMuchIn:{},cropControlZoomMuchOut:{},cropControlZoomIn:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var o=this;o.objW=o.obj.width(),o.objH=o.obj.height(),o.actualRotation=0,$.isEmptyObject(o.defaultImg)&&(o.defaultImg=o.obj.find("img")),o.createImgUploadControls(),$.isEmptyObject(o.options.loadPicture)?o.bindImgUploadControl():o.loadExistingImage()},createImgUploadControls:function(){var o=this,t="";""===o.options.customUploadButtonId&&(t='<i class="cropControlUpload"></i>’);var e='<i class="cropControlRemoveCroppedImage"></i>’;$.isEmptyObject(o.croppedImg)&&(e=""),$.isEmptyObject(o.options.loadPicture)||(t="");var n='<div class="cropControls cropControlsUpload"> ‘+t+e+" </div>";o.outputDiv.append(n),o.cropControlsUpload=o.outputDiv.find(".cropControlsUpload"),""===o.options.customUploadButtonId?o.imgUploadControl=o.outputDiv.find(".cropControlUpload"):(o.imgUploadControl=$("#"+o.options.customUploadButtonId),o.imgUploadControl.show()),$.isEmptyObject(o.croppedImg)||(o.cropControlRemoveCroppedImage=o.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var o=this,e='<form class="’+o.id+’_imgUploadForm" style="visibility: hidden;"> <input type="file" name="img" id="’+o.id+’_imgUploadField"> </form>’;o.outputDiv.append(e),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm");var n=o.CreateFallbackIframe();o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){""===n?o.form.find(‘input[type="file"]’).trigger("click"):o.iframeform.find(‘input[type="file"]’).trigger("click")}),$.isEmptyObject(o.croppedImg)||o.cropControlRemoveCroppedImage.on("click",function(){typeof o.options.onBeforeRemoveCroppedImg==typeof Function&&o.options.onBeforeRemoveCroppedImg.call(o),o.croppedImg.remove(),o.croppedImg={},$(this).hide(),typeof o.options.onAfterRemoveCroppedImg==typeof Function&&o.options.onAfterRemoveCroppedImg.call(o),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val("")}),o.form.find(‘input[type="file"]’).change(function(){if(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.imgUploadControl.hide(),o.options.processInline)if("undefined"==typeof FileReader)o.options.onError&&o.options.onError.call(o,"processInline is not supported by your Browser"),o.reset();else{var e=new FileReader;e.onload=function(t){var e=new Image;e.src=t.target.result,e.onload=function(){o.imgInitW=o.imgW=e.width,o.imgInitH=o.imgH=e.height,o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=e.src,o.obj.append(‘<img src="’+e.src+’">’),o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)}},e.readAsDataURL(o.form.find(‘input[type="file"]’)[0].files[0])}else{try{formData=new FormData(o.form[0])}catch(n){formData=new FormData,formData.append("img",o.form.find("input[type=file]")[0].files[0])}for(var i in o.options.uploadData)o.options.uploadData.hasOwnProperty(i)&&formData.append(i,o.options.uploadData[i]);$.ajax({url:o.options.uploadUrl,data:formData,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterUpload(t)})}})},loadExistingImage:function(){var o=this;if($.isEmptyObject(o.croppedImg)){o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=o.options.loadPicture;var t=$(‘<img src="’+o.options.loadPicture+’">’);o.obj.append(t),t.load(function(){o.imgInitW=o.imgW=this.width,o.imgInitH=o.imgH=this.height,o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)})}else o.cropControlRemoveCroppedImage.on("click",function(){o.croppedImg.remove(),$(this).hide(),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(""),o.croppedImg="",o.reset()})},afterUpload:function(o){var t=this;if(response="object"==typeof o?o:jQuery.parseJSON(o),"success"==response.status){t.imgInitW=t.imgW=response.width,t.imgInitH=t.imgH=response.height,t.options.modal&&t.createModal(),$.isEmptyObject(t.croppedImg)||t.croppedImg.remove(),t.imgUrl=response.url;var e=$(‘<img src="’+response.url+’">’);t.obj.append(e),e.load(function(){t.initCropper(),t.hideLoader(),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}"error"==response.status&&(alert(response.message),t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3))},createModal:function(){var o=this,t=o.windowH/2-o.objH/2,e='<div id="croppicModal"><div id="croppicModalObj" style="width:’+o.objW+"px; height:"+o.objH+"px; margin:0 auto; margin-top:"+t+’px; position: relative;"> </div></div>’;$("body").append(e),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj")},destroyModal:function(){var o=this;o.obj=o.outputDiv,o.modal.remove(),o.modal={}},initCropper:function(){var o=this;o.img=o.obj.find("img"),o.img.wrap(‘<div class="cropImgWrapper" style="overflow:hidden; z-index:1; position:absolute; width:’+o.objW+"px; height:"+o.objH+’px;"></div>’),o.createCropControls(),o.options.imgEyecandy&&o.createEyecandy(),o.initDrag(),o.initialScaleImg()},createEyecandy:function(){var o=this;o.imgEyecandy=o.img.clone(),o.imgEyecandy.css({"z-index":"0",opacity:o.options.imgEyecandyOpacity}).appendTo(o.obj)},destroyEyecandy:function(){var o=this;o.imgEyecandy.remove()},initialScaleImg:function(){var o=this;o.zoom(-o.imgInitW),o.zoom(40),o.options.enableMousescroll&&o.img.on("mousewheel",function(t){t.preventDefault(),o.zoom(o.options.zoomFactor*t.deltaY)}),o.img.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"}),o.options.imgEyecandy&&o.imgEyecandy.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"})},createCropControls:function(){var o,t=this,e="",n='<i class="cropControlZoomIn"></i>’,i='<i class="cropControlZoomOut"></i>’,r="",a="",p="",s='<i class="cropControlCrop"></i>’,c='<i class="cropControlReset"></i>’;t.options.doubleZoomControls&&(e='<i class="cropControlZoomMuchIn"></i>’,r='<i class="cropControlZoomMuchOut"></i>’),t.options.rotateControls&&(a='<i class="cropControlRotateLeft"></i>’,p='<i class="cropControlRotateRight"></i>’),o='<div class="cropControls cropControlsCrop">’+e+n+i+r+a+p+s+c+"</div>",t.obj.append(o),t.cropControlsCrop=t.obj.find(".cropControlsCrop"),t.options.doubleZoomControls&&(t.cropControlZoomMuchIn=t.cropControlsCrop.find(".cropControlZoomMuchIn"),t.cropControlZoomMuchIn.on("click",function(){t.zoom(10*t.options.zoomFactor)}),t.cropControlZoomMuchOut=t.cropControlsCrop.find(".cropControlZoomMuchOut"),t.cropControlZoomMuchOut.on("click",function(){t.zoom(10*-t.options.zoomFactor)})),t.cropControlZoomIn=t.cropControlsCrop.find(".cropControlZoomIn"),t.cropControlZoomIn.on("click",function(){t.zoom(t.options.zoomFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlZoomOut"),t.cropControlZoomOut.on("click",function(){t.zoom(-t.options.zoomFactor)}),t.cropControlZoomIn=t.cropControlsCrop.find(".cropControlRotateLeft"),t.cropControlZoomIn.on("click",function(){t.rotate(-t.options.rotateFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlRotateRight"),t.cropControlZoomOut.on("click",function(){t.rotate(t.options.rotateFactor)}),t.cropControlCrop=t.cropControlsCrop.find(".cropControlCrop"),t.cropControlCrop.on("click",function(){t.crop()}),t.cropControlReset=t.cropControlsCrop.find(".cropControlReset"),t.cropControlReset.on("click",function(){t.reset()})},initDrag:function(){var t=this;t.img.on("mousedown touchstart",function(e){e.preventDefault();var n,i,r=o.navigator.userAgent;r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(e.pageY&&e.pageX)?(n=e.originalEvent.touches[0].pageX,i=e.originalEvent.touches[0].pageY):(n=e.pageX,i=e.pageY);var a=t.img.css("z-index"),p=t.img.outerHeight(),s=t.img.outerWidth(),c=t.img.offset().top+p-i,l=t.img.offset().left+s-n;t.img.css("z-index",1e3).on("mousemove touchmove",function(o){var e,n;if(r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(o.pageY&&o.pageX)?(e=o.originalEvent.touches[0].pageY+c-p,n=o.originalEvent.touches[0].pageX+l-s):(e=o.pageY+c-p,n=o.pageX+l-s),t.img.offset({top:e,left:n}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",a)}),t.options.imgEyecandy&&t.imgEyecandy.offset({top:e,left:n}),t.objH<t.imgH){parseInt(t.img.css("top"))>0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));var i=-(t.imgH-t.objH);parseInt(t.img.css("top"))<i&&(t.img.css("top",i),t.options.imgEyecandy&&t.imgEyecandy.css("top",i))}else{parseInt(t.img.css("top"))<0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));var i=t.objH-t.imgH;parseInt(t.img.css("top"))>i&&(t.img.css("top",i),t.options.imgEyecandy&&t.imgEyecandy.css("top",i))}if(t.objW<t.imgW){parseInt(t.img.css("left"))>0&&(t.img.css("left",0),t.options.imgEyecandy&&t.imgEyecandy.css("left",0));var m=-(t.imgW-t.objW);parseInt(t.img.css("left"))<m&&(t.img.css("left",m),t.options.imgEyecandy&&t.imgEyecandy.css("left",m))}else{parseInt(t.img.css("left"))<0&&(t.img.css("left",0),t.options.imgEyecandy&&t.imgEyecandy.css("left",0));var m=t.objW-t.imgW;parseInt(t.img.css("left"))>m&&(t.img.css("left",m),t.options.imgEyecandy&&t.imgEyecandy.css("left",m))}t.options.onImgDrag&&t.options.onImgDrag.call(t)})}).on("mouseup",function(){t.img.off("mousemove")}).on("mouseout",function(){t.img.off("mousemove")})},rotate:function(o){var t=this;t.actualRotation+=o,t.img.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),t.options.imgEyecandy&&t.imgEyecandy.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),"function"==typeof t.options.onImgRotate&&t.options.onImgRotate.call(t)},zoom:function(o){var t=this,e=t.imgW/t.imgH,n=t.imgW+o,i=n/e,r=!0;(n<t.objW||i<t.objH)&&(n-t.objW<i-t.objH?(n=t.objW,i=n/e):(i=t.objH,n=e*i),r=!1),!t.options.scaleToFill&&(n>t.imgInitW||i>t.imgInitH)&&(n-t.imgInitW<i-t.imgInitH?(n=t.imgInitW,i=n/e):(i=t.imgInitH,n=e*i),r=!1),t.imgW=n,t.img.width(n),t.imgH=i,t.img.height(i);var a=parseInt(t.img.css("top"))-o/2,p=parseInt(t.img.css("left"))-o/2;a>0&&(a=0),p>0&&(p=0);var s=-(i-t.objH);s>a&&(a=s);var c=-(n-t.objW);c>p&&(p=c),r&&t.img.css({top:a,left:p}),t.options.imgEyecandy&&(t.imgEyecandy.width(n),t.imgEyecandy.height(i),r&&t.imgEyecandy.css({top:a,left:p})),t.options.onImgZoom&&t.options.onImgZoom.call(t)},crop:function(){var o=this;o.options.onBeforeImgCrop&&o.options.onBeforeImgCrop.call(o),o.cropControlsCrop.hide(),o.showLoader();var e,n={imgUrl:o.imgUrl,imgInitW:o.imgInitW,imgInitH:o.imgInitH,imgW:o.imgW,imgH:o.imgH,imgY1:Math.abs(parseInt(o.img.css("top"))),imgX1:Math.abs(parseInt(o.img.css("left"))),cropH:o.objH,cropW:o.objW,rotation:o.actualRotation};if("undefined"==typeof FormData){var i=new XMLHttpRequest,r="",a=[];for(var p in n)a.push(encodeURIComponent(p)+"="+encodeURIComponent(n[p]));for(var p in o.options.cropData)a.push(encodeURIComponent(p)+"="+encodeURIComponent(o.options.cropData[p]));r=a.join("&").replace(/%20/g,"+"),i.addEventListener("error",function(){o.options.onError&&o.options.onError.call(o,"XHR Request failed")}),i.onreadystatechange=function(){4==i.readyState&&200==i.status&&o.afterCrop(i.responseText)},i.open("POST",o.options.cropUrl),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.setRequestHeader("Content-Length",r.length),i.send(r)}else{e=new FormData;for(var p in n)n.hasOwnProperty(p)&&e.append(p,n[p]);for(var p in o.options.cropData)o.options.cropData.hasOwnProperty(p)&&e.append(p,o.options.cropData[p]);$.ajax({url:o.options.cropUrl,data:e,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterCrop(t)})}},afterCrop:function(o){var t=this;try{response=jQuery.parseJSON(o)}catch(e){response="object"==typeof o?o:jQuery.parseJSON(o)}"success"==response.status&&(t.options.imgEyecandy&&t.imgEyecandy.hide(),t.destroy(),t.obj.append(‘<img class="croppedImg" src="’+response.url+’">’),""!==t.options.outputUrlId&&$("#"+t.options.outputUrlId).val(response.url),t.croppedImg=t.obj.find(".croppedImg"),t.init(),t.hideLoader()),"error"==response.status&&(t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3)),t.options.onAfterImgCrop&&t.options.onAfterImgCrop.call(t,response)},showLoader:function(){var o=this;o.obj.append(o.options.loaderHtml),o.loader=o.obj.find(".loader")},hideLoader:function(){var o=this;o.loader.remove()},reset:function(){var o=this;o.destroy(),o.init(),$.isEmptyObject(o.croppedImg)||(o.obj.append(o.croppedImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(o.croppedImg.attr("url"))),"function"==typeof o.options.onReset&&o.options.onReset.call(o)},destroy:function(){var o=this;o.options.modal&&!$.isEmptyObject(o.modal)&&o.destroyModal(),o.options.imgEyecandy&&!$.isEmptyObject(o.imgEyecandy)&&o.destroyEyecandy(),$.isEmptyObject(o.cropControlsUpload)||o.cropControlsUpload.remove(),$.isEmptyObject(o.cropControlsCrop)||o.cropControlsCrop.remove(),$.isEmptyObject(o.loader)||o.loader.remove(),$.isEmptyObject(o.form)||o.form.remove(),o.obj.html("")},isAjaxUploadSupported:function(){var o=t.createElement("input");return o.type="file","multiple"in o&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&"undefined"!=typeof(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var o=this;if(o.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(o.iframeobj)){var e=t.createElement("iframe");e.setAttribute("id",o.id+"_upload_iframe"),e.setAttribute("name",o.id+"_upload_iframe"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("border","0"),e.setAttribute("src","javascript:false;"),e.style.display="none",t.body.appendChild(e)}else e=o.iframeobj[0];var n='<!DOCTYPE html><html><head><title>Uploading File</title></head><body><form class="’+o.id+’_upload_iframe_form" name="’+o.id+’_upload_iframe_form" action="’+o.options.uploadUrl+’" method="post" enctype="multipart/form-data" encoding="multipart/form-data" style="display:none;">’+$("#"+o.id+"_imgUploadField")[0].outerHTML+"</form></body></html>";e.contentWindow.document.open("text/htmlreplace"),e.contentWindow.document.write(n),e.contentWindow.document.close(),o.iframeobj=$("#"+o.id+"_upload_iframe"),o.iframeform=o.iframeobj.contents().find("html").find("."+o.id+"_upload_iframe_form"),o.iframeform.on("change","input",function(){o.SubmitFallbackIframe(o)}),o.iframeform.find("input")[0].attachEvent("onchange",function(){o.SubmitFallbackIframe(o)});var i=function(){e.detachEvent?e.detachEvent("onload",i):e.removeEventListener("load",i,!1);var t=o.getIframeContentJSON(e);jQuery.isEmptyObject(o.modal)&&o.afterUpload(t)};return e.addEventListener&&e.addEventListener("load",i,!0),e.attachEvent&&e.attachEvent("onload",i),"#"+o.id+"_imgUploadField"},SubmitFallbackIframe:function(o){o.showLoader(),o.options.processInline&&!o.options.uploadUrl?o.options.onError&&(o.options.onError.call(o,"processInline is not supported by your browser "),o.hideLoader()):(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.iframeform[0].submit())},getIframeContentJSON:function(o){try{var t,e=o.contentDocument?o.contentDocument:o.contentWindow.document,n=e.body.innerHTML;"<pre>"==n.slice(0,5).toLowerCase()&&"</pre>"==n.slice(-6).toLowerCase()&&(n=e.body.firstChild.firstChild.nodeValue),t=jQuery.parseJSON(n)}catch(i){t={success:!1}}return t}}}(window,document);
[/javascript]
Bu kodlar ile istediğiniz şekilde resmini yükleyebilir düzenleyeiblir ve kaydedebilirsiniz. Gerekli olan fontawesome kütühanesinide mutlaka eklemeniz gerekmektedir. Bunun haricinde projenenin github sayfasınıda veriyorum istediğiniz gibi indirip kendinize ait olan kısımlara bakabilir ve düzenleyebilirsiniz.
Jquery php ile resim croplama Github
buton gibi bir element yok mu, nasıl resim upload edip croplayacağız anlayamadım.
Kodları aynı şekilde kopyala + yapıştır yaparak test ettinizmi peki ?