Geek Answers Handbook

Jcrop has problems with large images

Google translations

I run to get the upload form in php and jquery and say that now everything is fine, except for one thing, which, in my opinion, is nonsense, but still can not understand. Let me explain: in practice, when I start downloading an image, I immediately print on the screen, this is a temporary preview where I will go there to cut my favorite image and then save the thumbnail. This preview however, if I embed a high resolution jpg, I see the size in full size, therefore too large for the page. The code is as follows:

index.php

<?php function uploadImageFile() { // Note: GD library is required for this function if ($_SERVER['REQUEST_METHOD'] == 'POST') { $iWidth = $iHeight = 100; // desired image result dimensions $iJpgQuality = 90; if ($_FILES) { // if no errors and size less than 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 into cache folder move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName); // change file permission to 644 @chmod($sTempFileName, 0644); if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) { $aSize = getimagesize($sTempFileName); // try to obtain image info if (!$aSize) { @unlink($sTempFileName); return; } // check for image type switch($aSize[2]) { case IMAGETYPE_JPEG: $sExt = '.jpg'; // create a new image from file $vImg = @imagecreatefromjpeg($sTempFileName); break; /*case IMAGETYPE_GIF: $sExt = '.gif'; // create a new image from file $vImg = @imagecreatefromgif($sTempFileName); break;*/ case IMAGETYPE_PNG: $sExt = '.png'; // create a new image from file $vImg = @imagecreatefrompng($sTempFileName); break; default: @unlink($sTempFileName); return; } // create a new true color image $vDstImg = @imagecreatetruecolor( $iWidth, $iHeight ); // copy and resize part of an image with resampling imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']); // define a result image filename $sResultFileName = $sTempFileName . $sExt; // output image to 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 a 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 i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; }; // check for selected crop region function checkForm() { if (parseInt($('#w').val())) return true; $('.error').html('Please select a crop region and then press Upload').show(); return false; }; // update info by cropping (onChange and onSelect events handler) function updateInfo(e) { $('#x1').val(ex); $('#y1').val(ey); $('#x2').val(e.x2); $('#y2').val(e.y2); $('#w').val(ew); $('#h').val(eh); }; // clear info by cropping (onRelease event handler) function clearInfo() { $('.info #w').val(''); $('.info #h').val(''); }; function fileSelectHandler() { // get selected file var oFile = $('#image_file')[0].files[0]; // hide all errors $('.error').hide(); // check for image type (jpg and png are allowed) var rFilter = /^(image\/jpeg|image\/png)$/i; if (! rFilter.test(oFile.type)) { $('.error').html('Please select a valid image file (jpg and png are allowed)').show(); return; } // check for file size if (oFile.size > 55555250 * 1024) { $('.error').html('You have selected too big file, please select a one 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 the DataURL which we can use as a source of the image oImage.src = e.target.result; oImage.onload = function () { // onload event handler // display step 2 $('.step2').fadeIn(500); // display some 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 this scope) to hold the Jcrop API and image size var jcrop_api, boundx, boundy; // destroy Jcrop if it is 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 the Jcrop API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the Jcrop API in the jcrop_api variable jcrop_api = this; }); }; }; // read selected file as 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 you do not understand, you can download the full script. (Sorry for my English, I am Italian) Download: http://dfiles.eu/files/6yazp1des

+4
source share
2 answers

Late, but we hope this helps someone else in the future working with larger images in JCrop. You don't have to do anything, just specify JCrop options like

  $('#cropbox').Jcrop({ aspectRatio: 1, //If you want to keep aspectRatio boxWidth: 650, //Maximum width you want for your bigger images boxHeight: 400, //Maximum Height for your bigger images onSelect: updateCoords },function() { alert('Now you see smaller preview of your bigger one.'); });

It’s good that when you crop your images and get the sizes, you get the actual image sizes — these are the sizes of your large image and, therefore, you can crop the images above the server without calculating anything, just send the sizes and crop.

+14
source

Trying to carefully select my words so that they are better translated for you.

It is a difficult task to scale the images down to fit into the jcrop window. I am doing this with ColdFusion, so I have no example for you in php. Instead, I will give you a list of what to do.

  • Upload image
  • Read Image Sizes
  • Displaying a fixed scale image that fits your window
  • Determine what ratio the thumbnail compares to the full size image.
  • Take the values ​​that jCrop gives you for your crop X, Y, width and height and multiply them by the scaling factor.
  • Apply the crop to the original image, but use the values ​​from step 5

A common problem with this is getting Crop values ​​that are not integers, usually you want to round any values ​​to the nearest integer to avoid the possibility of having crop values ​​that are larger than the image.

+2
source

More articles:


All Articles