Login/Register
Jcrop have problems with large size images
Asked Answered
Solved phpjqueryimagecropjcrop
N

2

5

TRANSLATED by Google

I'm running to achieve an upload form in php and jquery and say that everything is fine now except for one thing that I think is nonsense but still can not figure it out. Let me explain: in practice when I run the upload of image, I immediately printed to the screen is a temporary preview where I will go there to cut to my liking 's image and then save the thumbnail. This preview however, if I insert jpg high resolution me see life-size, so 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(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 > 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 don't understand you can download the full script. (Sorry for my English, I'm Italian) Download: http://dfiles.eu/files/6yazp1des

Nauseous answered 8/4, 2013 at 21:48 Comment(0)
M
21

It's late to reply but hopefully will must help someone else in future in dealing with larger images in JCrop. You don't have to do anything bigger just provide JCrop's parameters like this

 $('#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.');
 });

Good thing is that when you crop your images and get the dimensions, you will get the real image dimensions means dimensions of your large image and hence you can crop your images over server without calculating anything again just send the dimensions and crop.

Meathead answered 16/1, 2014 at 21:51 Comment(6)
@Abdul Jabbar : Thank you so much, its working for me too, you don't know how much frustrated i was specially for big portrait images ,big resolutions, Setting boxWidth,boxHeight solved ny problem , and i didnt find this in actual plugin documentation deepliquid.com/content/Jcrop_Manual.html – Polliwog
@Satindersingh I am very glad that it helped you. You are most welcome. – Meathead
Having the same problem, but not totally understanding this answer. First, where do I place this piece of code? In SCRIPT.JS? Also, why are you calling a function here?.Thanks in advance. – Mew
I have this same situation but did not work for resize large image Jcrop.load('target').then(img => { jcp = Jcrop.attach(img, { multi: true }); Jcrop.setOptions({ boxWidth: 500, minSize: [200, 300], }); }); – Explore
@UtsavUpadhyay I could not get what problem you are facing? PS. It has been almost 7 years, I don't remember much about this library. Hopefully I will answer your question – Meathead
I am trying to handle a large image that covers all the pages when I upload it. How can I manage width and height while uploading I have posted a small snippet or you can check this fiddle if I upload a large image it covers all web browser @Airy – Explore
B
2

Trying to pick my words carefully so they will translate better for you.

It is a complicated task to scale images down to fit inside a jcrop window. I do it with ColdFusion, so I do not have an example for you in php. Instead I will give you a list of what to do.

  1. Upload the image
  2. Read the image dimensions
  3. Display the image at a fixed scale that fits in your window
  4. Determine what ratio your scaled down image is compared to full size image
  5. Take the values jCrop gives your for your crop X, Y, width and height and multiply them by your scale ratio
  6. Apply your crops to the original image, but use the the values you get from step 5

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

Brandnew answered 9/4, 2013 at 0:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.