php - Jcrop have problems with large size images -
translated google
i'm running achieve upload form in php , jquery , fine except 1 thing think nonsense still can not figure out. let me explain: in practice when run upload of image, printed screen temporary preview go there cut liking 's image , save thumbnail. preview however, if insert jpg high resolution me see life-size, large page. code follows:
index.php
<?php function uploadimagefile() { // note: gd library required function if ($_server['request_method'] == 'post') { $iwidth = $iheight = 100; // desired image result dimensions $ijpgquality = 90; if ($_files) { // if no errors , size less 250kb if (! $_files['image_file']['error'] && $_files['image_file']['size'] < 55555250 * 1024) { if (is_uploaded_file($_files['image_file']['tmp_name'])) { // new unique filename $stempfilename = 'cache/' . md5(time().rand()); // move uploaded file cache folder move_uploaded_file($_files['image_file']['tmp_name'], $stempfilename); // change file permission 644 @chmod($stempfilename, 0644); if (file_exists($stempfilename) && filesize($stempfilename) > 0) { $asize = getimagesize($stempfilename); // try obtain image info if (!$asize) { @unlink($stempfilename); return; } // check image type switch($asize[2]) { case imagetype_jpeg: $sext = '.jpg'; // create new image file $vimg = @imagecreatefromjpeg($stempfilename); break; /*case imagetype_gif: $sext = '.gif'; // create new image file $vimg = @imagecreatefromgif($stempfilename); break;*/ case imagetype_png: $sext = '.png'; // create new image file $vimg = @imagecreatefrompng($stempfilename); break; default: @unlink($stempfilename); return; } // create new true color image $vdstimg = @imagecreatetruecolor( $iwidth, $iheight ); // copy , resize part of image resampling imagecopyresampled($vdstimg, $vimg, 0, 0, (int)$_post['x1'], (int)$_post['y1'], $iwidth, $iheight, (int)$_post['w'], (int)$_post['h']); // define result image filename $sresultfilename = $stempfilename . $sext; // output image file imagejpeg($vdstimg, $sresultfilename, $ijpgquality); @unlink($stempfilename); return $sresultfilename; } } } } } } $simage = uploadimagefile(); echo '<div align=center><img src="'.$simage.'" /></div>'; echo $simage; ?> <!-- add styles --> <link href="css/main.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.jcrop.min.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <script src="js/jquery.min.js"></script> <script src="js/jquery.jcrop.min.js"></script> <script src="js/script.js"></script> </head> <body> <div class="demo"> <div class="bbody"> <!-- upload form --> <form id="upload_form" enctype="multipart/form-data" method="post" onsubmit="return checkform()"> <!-- hidden crop params --> <input type="hidden" id="x1" name="x1" /> <input type="hidden" id="y1" name="y1" /> <input type="hidden" id="x2" name="x2" /> <input type="hidden" id="y2" name="y2" /> <h2>step1: please select image file</h2> <div><input type="file" name="image_file" id="image_file" onchange="fileselecthandler()" /></div> <div class="error"></div> <div class="step2"> <h2>step2: please select crop region</h2> <img id="preview"/> <!-- questa È la preview --> <div class="info"> <label>file size</label> <input type="text" id="filesize" name="filesize" /> <label>type</label> <input type="text" id="filetype" name="filetype" /> <label>image dimension</label> <input type="text" id="filedim" name="filedim" /> <label>w</label> <input type="text" id="w" name="w" /> <label>h</label> <input type="text" id="h" name="h" /> </div> <input type="submit" value="upload" /> </div> </form> </div> </div> </body> </html> script.js
function bytestosize(bytes) { var sizes = ['bytes', 'kb', 'mb']; if (bytes == 0) return 'n/a'; var = parseint(math.floor(math.log(bytes) / math.log(1024))); return (bytes / math.pow(1024, i)).tofixed(1) + ' ' + sizes[i]; }; // check selected crop region function checkform() { if (parseint($('#w').val())) return true; $('.error').html('please select crop region , press upload').show(); return false; }; // update info cropping (onchange , onselect events handler) function updateinfo(e) { $('#x1').val(e.x); $('#y1').val(e.y); $('#x2').val(e.x2); $('#y2').val(e.y2); $('#w').val(e.w); $('#h').val(e.h); }; // clear info cropping (onrelease event handler) function clearinfo() { $('.info #w').val(''); $('.info #h').val(''); }; function fileselecthandler() { // selected file var ofile = $('#image_file')[0].files[0]; // hide errors $('.error').hide(); // check image type (jpg , png allowed) var rfilter = /^(image\/jpeg|image\/png)$/i; if (! rfilter.test(ofile.type)) { $('.error').html('please select valid image file (jpg , png allowed)').show(); return; } // check file size if (ofile.size > 55555250 * 1024) { $('.error').html('you have selected big file, please select 1 smaller image file').show(); return; } // preview element var oimage = document.getelementbyid('preview'); // prepare html5 filereader var oreader = new filereader(); oreader.onload = function(e) { // e.target.result contains dataurl can use source of image oimage.src = e.target.result; oimage.onload = function () { // onload event handler // display step 2 $('.step2').fadein(500); // display basic image info var sresultfilesize = bytestosize(ofile.size); $('#filesize').val(sresultfilesize); $('#filetype').val(ofile.type); $('#filedim').val(oimage.naturalwidth + ' x ' + oimage.naturalheight); // create variables (in scope) hold jcrop api , image size var jcrop_api, boundx, boundy; // destroy jcrop if existed if (typeof jcrop_api != 'undefined') jcrop_api.destroy(); // initialize jcrop $('#preview').jcrop({ minsize: [32, 32], // min crop size aspectratio : 1, // keep aspect ratio 1:1 bgfade: true, // use fade effect bgopacity: .3, // fade opacity onchange: updateinfo, onselect: updateinfo, onrelease: clearinfo }, function(){ // use jcrop api real image size var bounds = this.getbounds(); boundx = bounds[0]; boundy = bounds[1]; // store jcrop api in jcrop_api variable jcrop_api = this; }); }; }; // read selected file dataurl oreader.readasdataurl(ofile); } jquey.jcrop.min.css
/* jquery.jcrop.min.css v0.9.10 (build:20120429) */ .jcrop-holder{direction:ltr;text-align:left;} .jcrop-vline,.jcrop-hline{background:#fff url(jcrop.gif) top left repeat;font-size:0;position:absolute;} .jcrop-vline{height:100%;width:1px!important;} .jcrop-hline{height:1px!important;width:100%;} .jcrop-vline.right{right:0;} .jcrop-hline.bottom{bottom:0;} .jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;} .jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;} .jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;} .jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;} .jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;} .jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;} .jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;} .jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;} .jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;} .jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;} .jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;} .jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;} .jcrop-dragbar.ord-n{margin-top:-4px;} .jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;} .jcrop-dragbar.ord-e{margin-right:-4px;right:0;} .jcrop-dragbar.ord-w{margin-left:-4px;} .jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#fff;filter:alpha(opacity=70)!important;opacity:.70!important;} .jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#fff;border-radius:3px;} .jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important;} .jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#fff;border-color:#000;border-radius:3px;} .jcrop-holder img,img.jcrop-preview{max-width:none;} if don't understand can download full script. (sorry english, i'm italian) download: http://dfiles.eu/files/6yazp1des
it's late reply must else in future in dealing larger images in jcrop. don't have bigger provide jcrop's parameters this
$('#cropbox').jcrop({ aspectratio: 1, //if want keep aspectratio boxwidth: 650, //maximum width want bigger images boxheight: 400, //maximum height bigger images onselect: updatecoords },function() { alert('now see smaller preview of bigger one.'); }); good thing when crop images , dimensions, real image dimensions means dimensions of large image , hence can crop images on server without calculating again send dimensions , crop.
Comments
Post a Comment