php - Trouble cropping and resizing image -

php - Trouble cropping and resizing image -

i'm trying create thumbnail image larger image. i'm using jcrop co-ordinates of crop can't turn cropped thumbnail image. i've set jcrop , it's sending through x-y co-ordinates along size of box can't work out how crop that.

what have path image on server, along 4 co-ordinates , width , height of square box create (i've locked aspect ratio 1:1 want square thumbnails). send via ajax php cropping script, cannot crop based on set.

this have far:

public function crop($file, $crop) { $height = $width = 180; $ratio = $width / $height; $pos = strrpos($file, '.'); $name = substr($file, 0, $pos); $ext = strtolower(substr($file, $pos)); if( ! in_array($ext, array('.gif', '.jpg', '.jpeg', '.png'))) { homecoming 'invalid_ext'; } // when loading image check see if first character in file slash, , if remove lastly character of root slash. $src = root . (in_array(substr($file, 0, 1), array('/', '\\')) ? substr($file, 1) : $file); $srcres = imagecreatefromstring(file_get_contents($src)); if( ! $srcres) { homecoming 'invalid_file'; } $srcwidth = imagesx($srcres); $srcheight = imagesy($srcres); $srcratio = $srcwidth / $srcheight; $dstres = imagecreatetruecolor($crop['w'], $crop['h']); if($ext == '.gif') { $dstbg = imagecolorallocate($dstres, 0, 0, 0); imagecolortransparent($dstres, $dstbg); } elseif($ext == '.png') { $dstbg = imagecolorallocate($dstres, 0, 0, 0); imagecolortransparent($dstres, $dstbg); imagealphablending($dstres, false); imagesavealpha($dstres, true); } $srcx = 0; $srcy = 0; if($srcratio > $ratio) { $tmpwidth = $srcheight * $ratio; $tmpheight = $srcheight; $srcx = ($srcwidth - $tmpwidth) / 2; $srcy = 0; } else { $tmpwidth = $srcwidth; $tmpheight = $srcwidth / $ratio; $srcx = 0; $srcy = ($srcheight - $tmpheight) / 2; } imagecopyresampled($dstres, $srcres, 0, 0, $crop['x'], $crop['y'], $crop['w'], $crop['h'], $tmpwidth, $tmpheight); $dst = root . (in_array(substr($name, 0, 1), array('/', '\\')) ? substr($name, 1) : $name) . '-thumb' . $ext; if($ext == '.gif') { $try = imagegif($dstres, $dst); } elseif($ext == '.jpg' || $ext == '.jpeg') { $try = imagejpeg($dstres, $dst, 80); } elseif($ext == '.png') { $try = imagepng($newthumbimageresource, $dst); } if( ! $try) { homecoming 'create_err'; } homecoming 'success'; }

i've tried changing sorts of things in imagecopyresampled cannot crop per jcrop sending through. if utilize $srcwidth , $srcheight maintains aspect ratio of original image , squishes 180px square. doesn't seem resizing or cropping right place.

can please help me work out figures should using where? i've been banging head against day. edit

here rest of code. first javascript runs jcrop. it's triggered after ajax file upload create thumbnail of image:

this ajax function upload @ end calls cropper.

$(function () { 'use strict'; // alter location of server-side upload handler: var url = '/eshop/library/ajax/ajax.file-upload.php'; var uploaddir = 'prodimages/'; $('.listing-image').fileupload({ url: url, datatype: 'json', autoupload: true, acceptfiletypes: /(\.|\/)(gif|jpe?g|png)$/i, maxfilesize: 1000000, // 1 mb // enable image resizing, except android , opera, // back upwards image resizing, fail // send blob objects via xhr requests: disableimageresize: /android(?!.*chrome)|opera/ .test(window.navigator.useragent), previewmaxwidth: 120, previewmaxheight: 120, previewcrop: true, paramname: 'files[]', formdata: {uploaddir: uploaddir} })/*.on('fileuploadprocessalways', function (e, data) { var index = data.index; var file = data.files[index]; $(this).html(file.preview); })*/.on('fileuploadprogressall', function (e, data) { var progress = parseint(data.loaded / data.total * 100, 10); $('.listing-progress', this).css( 'width', progress + '%' ); }).on('fileuploaddone', function (e, data) { var file = data.result.files[0]; var html = '<div class="listing-preview">\ <img src="' + file.thumbnailurl + '" data-name="' + file.name + '">\ <div class="listing-preview-delete">delete</div>\ </div>'; $(this).html(html).data('delete-url', file.deleteurl).css('padding', 0); crop('/' + uploaddir + file.name, $(this).prop('id')); }); });

this sends crop details through php script above via ajax.

$(document).on('click', '.crop-btn', function() { var info = { file: $(this).data('src'), crop: jcrop.tellselect() } showloadingbyid('crop-loading'); ajaxhandler('/eshop/library/ajax/ajax.product-crop-thumb.php', data, 'post', true); });

the crop window lightbox, function vertically centres , resizes image if it's vertically bigger available space.

function centrecrop() { var m = ($(window).height() - ($('.crop > div').height() + 60)) / 2; $('.crop > div').css('margin-top', m); if($('#crop-img').height() > $('.crop > div').height() - 30) { $('#crop-img-container').height($('.crop > div').height() - 30); } }

this initial function stores file cropped , calls worker if it's not running.

var tobecropped = []; var working = false; function crop(file, id) { tobecropped.push({path: file, id: id}); if( ! working) { working = true; cropworker(); } }

this function run when crop has finished destroy jcrop , clear crop lightbox ready next image cropped.

function cropsuccess() { $('.crop').fadeout(250, function() { jcrop.destroy(); $(this).html(''); cropworker(); }); }

this worker creates content in lightbox , initiates jcrop.

function cropworker() { if(tobecropped.length > 0) { file = tobecropped.shift(); html = '<div>\ <div id="crop-img-container" class="row-fluid">\ <img id="crop-img" src="' + file.path + '">\ </div>\ <div class="row-fluid">\ <div class="span3 offset9">\ <button class="span12 btn crop-btn" data-id="' + file.id + '" data-src="' + file.path + '">create thumb</button>\ </div>\ </div>\ <div class="row-fluid loading-screen" id="crop-loading">\ <div>\ <h4>cropping...</h4>\ <img src="/img/loading.gif">\ </div>\ </div>\ </div>'; $('.crop').html(html); $('.crop').fadein(250); $('#crop-img').load(function() { centrecrop(); $('#crop-img').jcrop({ aspectratio: 1/1, bgcolor: 'black', bgopacity: 0.4, boxwidth: $('#crop-img').width(), // added boxwidth , height see if prepare it, no difference or without. boxheight: $('#crop-img').height(), //maxsize: [300,300], minsize: [180,180] }, function() { jcrop = this; jcrop.setselect([0,0,180,180]); }); }); } else { working = false; } }

update

part of problem seems image resizing. changing image size fit screen, though jcrop take care of me seems have tell jcrop original dimensions of image. i've added true size alternative when initializing jcrop , seems we're there.

for smaller images, under 1000px cropper seems working great. larger ones (1000px +) it's producing black images. doesn't when utilize jcrop demo script difference between 2 1 outputting file screen , other saving it. can't see other difference or figure out why happen.

update 2 seems affected if i'm running code through ajax. if run exact same function posting page , running @ top, thumbnail created every time, no matter size of original image or size of box draw.

in code $crop['w'] , $crop['h'] source;

$tmpwidth , $tmpheight destination;

so should switch them according imagecopyresampled function (http://php.net//manual/fr/function.imagecopyresampled.php).

imagecopyresampled($dstres, $srcres, 0, 0, $crop['x'], $crop['y'], $tmpwidth, $tmpheight, $crop['w'], $crop['h']);

edit 2

your destination image shouldn't set $crop data, size want :

$dstres = imagecreatetruecolor(180, 180);

and i'm not sure value have $tmpwidth , $tmpheight should both 180 since it's size want :

imagecopyresampled($dstres, $srcres, 0, 0, $crop['x'], $crop['y'], 180, 180, $crop['w'], $crop['h']);

edit 3

ok lastly try, i've working code jcrop don't utilize within function, it's still working same way. checked line line code , here have. removed ratio, jcrop manage it, no need php. proper dest image, proper imagecopyresampled, looks me :/

public function crop($file, $crop) { $height = $width = 180; // file type checking $pos = strrpos($file, '.'); $name = substr($file, 0, $pos); $ext = strtolower(substr($file, $pos)); if( ! in_array($ext, array('.gif', '.jpg', '.jpeg', '.png'))) { homecoming 'invalid_ext'; } // source image $src = root . (in_array(substr($file, 0, 1), array('/', '\\')) ? substr($file, 1) : $file); $srcres = imagecreatefromstring(file_get_contents($src)); if( ! $srcres) { homecoming 'invalid_file'; } // destination image $dstres = imagecreatetruecolor($width, $height); // file type transparence if($ext == '.gif') { $dstbg = imagecolorallocate($dstres, 0, 0, 0); imagecolortransparent($dstres, $dstbg); } elseif($ext == '.png') { $dstbg = imagecolorallocate($dstres, 0, 0, 0); imagecolortransparent($dstres, $dstbg); imagealphablending($dstres, false); imagesavealpha($dstres, true); } // bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h ) imagecopyresampled($dstres, $srcres, 0, 0, $crop['x'], $crop['y'], $width, $height, $crop['w'], $crop['h']); $dst = root . (in_array(substr($name, 0, 1), array('/', '\\')) ? substr($name, 1) : $name) . '-thumb' . $ext; if($ext == '.gif') { $try = imagegif($dstres, $dst); } elseif($ext == '.jpg' || $ext == '.jpeg') { $try = imagejpeg($dstres, $dst, 80); } elseif($ext == '.png') { $try = imagepng($newthumbimageresource, $dst); } if( ! $try) { homecoming 'create_err'; } homecoming 'success'; }

php gd crop jcrop