// convert bytes into friendly format 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(e.x); $('#y1').val(e.y); $('#x2').val(e.x2); $('#y2').val(e.y2); $('#w').val(e.w); $('#h').val(e.h); };
// 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 > 250 * 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();
// 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); }
PHP
function uploadImageFile() { // Note: GD library is required for this function
if ($_SERVER['REQUEST_METHOD'] == 'POST') { $iWidth = $iHeight = 200; // 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'] 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_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);
