sconsult / croppic Goto Github PK

When i upload image in firefox, after crop i dont view the crop image but i wiev original image.
help me please

Hi!
How can i change image path?
i download full site and im using OUTPUT example.
in files img_crop_to_file.php and img_save_to_file.php

$imagePath = "tem/";
$output_filename = "temp/croppedImg_".rand();

Buy if i change those to my path for example:
$imagePath = "../../content/";
$output_filename = "../../content/croppedImg_".rand();

Dont work :s

As far as I can tell the only way to control the size of the crop area is via css.
My issue is what if I want to crop very large images, e.g. 1400px wide (for banners etc).
That's a pretty large container and not very user friendly. Anyway around this?
Thanks!

I get the following error when i try to work with images above 1.5mb. I'm not sure why. The jSON data that is being returned is obviously not correct but im not sure how to fix the issue.

And here is the response:
{"status":"error","message":"ERROR Return Code: 1"}{"status":"error","message":"ERROR Return Code: 1"}
which is generated by img_save_to_file.php

Soooo, any ideas on how to fix the app to support large file upload?

Also may i add that large image files also do not work on the croppic home page.

Issue: When you zoom out a picture, sometimes the image does not adjust to the max size of the crop box

Result: The cropped Image has black bars at the sides/borders

Solution:
Some changes in the zoom() method:
zoom :function(x){
var that = this;
var ratio = that.imgW / that.imgH;
var newWidth = that.imgW+x;
var newHeight = newWidth/ratio;
var doPositioning = true;
var doPositioningClearTop = false;
var doPositioningClearLeft = false;

        if (newWidth < that.objW || newHeight < that.objH) {
            if (newWidth - that.objW < newHeight - that.objH) {
                newWidth = that.objW;
                newHeight = newWidth / ratio;
                doPositioningClearLeft = true;
            } else {
                newHeight = that.objH;
                newWidth = ratio * newHeight;
                doPositioning = false;
            }
        } 

        if( newWidth > that.imgInitW || newHeight > that.imgInitH){
            if( newWidth - that.imgInitW < newHeight - that.imgInitH ){ 
                newWidth = that.imgInitW;
                newHeight = newWidth / ratio;
                doPositioningClearTop = true;
            }else{
                newHeight = that.imgInitH;
                newWidth = ratio * newHeight;
                doPositioning = false;
            }
        }

        that.imgW = newWidth;
        that.img.width(newWidth); 

        that.imgH = newHeight;
        that.img.height(newHeight); 

        var newTop = parseInt( that.img.css('top') ) - x/2;
        var newLeft = parseInt( that.img.css('left') ) - x/2;

        if (newTop > 0) { newTop = 0; }
        if (newLeft > 0) { newLeft = 0; }

        var maxTop = -(newHeight - that.objH); if (newTop < maxTop) { newTop = maxTop; }
        var maxLeft = -(newWidth - that.objW); if (newLeft < maxLeft) { newLeft = maxLeft; }

        if (doPositioning) {
            that.img.css({ 'top': doPositioningClearTop ? 0 : newTop, 'left': doPositioningClearLeft ? 0 : newLeft });
        }

        if(that.options.imgEyecandy){
            that.imgEyecandy.width(newWidth);
            that.imgEyecandy.height(newHeight);
            if (doPositioning) {
                that.imgEyecandy.css({ 'top': doPositioningClearTop ? 0 : newTop, 'left': doPositioningClearLeft ? 0 : newLeft });
            }
        }   

        if (that.options.onImgZoom) that.options.onImgZoom.call(that);

    },

Now, when you zoom the picture, it will always be in the range of the crop box. There will never be added black bars.

I had to write this fix because I am using this script in combination with a C# MVC project. Whenever I sent a picture to the controller that was not completly in the range of the crop box, I got an error at the C# method "Clone":
var bmpImage = new Bitmap();
var cropArea = new Rectangle(imgX1, imgY1, cropW, cropH);
bmpImage.Clone(cropArea, bmpImage.PixelFormat); <-- error

hi i liked ur plugin. and im using on my social website i modified a little ur script and working awesome..

users can select image and they uploading image croping original image but i want save a big version original cropped image..

how can i do this or (this plugin now sending imgx1 and imgy1 for container size) i want original image size too...

i could tell what i want..
Regards...

I am having a hard time bringing back the URL of the image on the onAfterImgCrop() callback. I figured I would just make a call for the URL, but nothing is coming back. I want to display multiple versions of the same image.

I am making the call via:

onAfterImgCrop:function(response){
console.log(response);
// show other divs with the same image inside of it.

}

I am getting undefined in the console log.

I assume that the crop json response isn't getting passed back to the front. I am trying to get the URL to display it.

Is that not really possible to do with how the onAfterImgCrop() callback is setup?

I have a custom upload button on which I want to let users drop their image.

$changeThumbnail =  $("#change-thumbnail");

Croppic init:

var croppicContaineroutputOptions = {
    customUploadButtonId: 'change-thumbnail',
    uploadUrl: '/foo',
    cropUrl: '/bar',
    outputUrlId:'cropOutput',
    modal: false
};


var cropContaineroutput = new Croppic('cropContainerOutput', croppicContaineroutputOptions);

So I disable the default behaviour as follows:

$changeThumbnail.on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
});

$changeThumbnail.on("dragenter", function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Then added a drop event listener:

changeThumbnail .on("drop", function(e) {
    if(e.originalEvent.dataTransfer) {
        if(e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            var upload = e.originalEvent.dataTransfer.files;

           // What to do here to load the image in the cropper when dropped?

           cropContaineroutput.initCropper();
        }
    }
});

Any help would be appreciated.

First of all, thanks for such a great plugin!

I would like to know under which license you are distributing the plugin, as I couldn't find it in the readme.

Thanks!

Would really like to see mousewheel zoom, and touch support. currently useless on mobile devices, and mousewheel feels much more natural than button clicks for zooming.

when I upload this image to croppic I always get error, even croppic on the official site couldn't handle that image correct

Isn't it would be good, if you add support for rotation. I tried to add rotation, then cropping but it would work only for 180 deg rotation. For 90 deg rotation its giving Out of Memory exception. Obviously, the width of the bounding boxes are larger in that case.
Any chances that I can implement this or you should be upgrading it.

Hi, Is there a possibility to set a default image without clicking on download button.

how would i go about implementing croppic with my php mysqli upload form:

my javascript (jquery.form.min.js):

(function() {
$('form').ajaxForm({
beforeSubmit: function() {
count = 0;
val = $.trim( $('#images').val() );

        if( val == '' ){
            count= 1;
            $( "#images" ).next('span').html( "Please select your images" );
        }

        if(count == 0){
            for (var i = 0; i < $('#images').get(0).files.length; ++i) {
                img = $('#images').get(0).files[i].name;
                var extension = img.split('.').pop().toUpperCase();
                if(extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
                    count= count+ 1
                }
            }
            if( count> 0) $( "#images" ).next('span').html( "Please select valid images" );
        }

        if( count> 0){
            return false;
        } else {
            $( "#images" ).next('span').html( "" );
        }

    },

    beforeSend:function(){
       $('#loader').show();
       $('#image_upload').hide();
    },
    success: function(msg) {
    },
    complete: function(xhr) {
        $('#loader').hide();
        $('#image_upload').show();

        $('#images').val('');
        $('#error_div').html('');
        result = xhr.responseText;
        result = $.parseJSON(result);
        base_path = $('#base_path').val();

        if( result.success ){
            name = base_path+'images/'+result.success;
            html = '';
            html+= '<image src="'+name+'">';
            $('#uploaded_images #success_div').append( html );
        } else if( result.error ){
            error = result.error
            html = '';
            html+='<p>'+error+'</p>';
            $('#uploaded_images #error_div').append( html );
        }

        $('#error_div').delay(5000).fadeOut('slow');

    }
}); 

})();

the form itself:

                                    <input class='file' type="file" class="form-control" name="images" id="images" placeholder="Please choose your image">
                                    <span class="help-block"></span>
                                </div>
                                <div id="loader" style="display: none;">
                                    Please wait image uploading to server....
                                </div>
                                <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
                            </form>
                            <div>
                                <b>Before:</b>
                                <?php echo "<img  style=\"height:300px;width:1500px\" src=\"images/users/$backphoto\">";?>
                                <!--<p>This only shows your previous avatar not the uploaded one <img src="images/emoticons/sad_32x32.png">!!!</p>-->
                                <b>After: </b>
                                <script>
                                    function readURL(input) {

                                        if (input.files && input.files[0]) {
                                            var reader = new FileReader();

                                            reader.onload = function (e) {
                                                $('#blah').attr('src', e.target.result);
                                            }

                                            reader.readAsDataURL(input.files[0]);
                                        }
                                    }

                                    $("#images").change(function(){
                                        readURL(this);
                                    });
                                </script>
                                <img id="blah" style="height:300px;width:1500px" src="#" alt="your image" />
                            </div>
                            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
                            <script type="text/javascript" src="js/jquery.form.min.js"></script>
                </p>

Hi,

If croppic support filter file type (only image) in dialog choioce image, please show me how to set option.

Thanks.

Hello,

I am using this excellent plug-in but I meet a problem: I would like to rename the cropped file with a dynamic value (i.e. the id of the selected item in my page). I tried to use the cropData function with a given field but it seems it does not take into account if it has been updated, with Ajax per example. The value is always the same that had been set up during loading of the page. I have tried to use the method cropperHeader.reset(); but I do not see any improvemement.

Is it possible to set up cropData like this?
cropData:{ 'picture_name': $('input#sp_id').val() }

Thanks!

Hi everyone,

Just hit a roadblock, can't move on.

So the loading animation that appears when an image is being uploaded only appears in the default div, I mean by default these are the configurations:

html:

script:

var croppicContainerModalOptions = {
uploadUrl:'img_save_to_file.php',
cropUrl:'img_crop_to_file.php',
modal:true,
imgEyecandyOpacity:0.4,
loaderHtml:'

var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);

But even if I create another like this:

html

script

var croppicContainerModalOptions = {
uploadUrl:'img_save_to_file.php',
cropUrl:'img_crop_to_file.php',
modal:true,
imgEyecandyOpacity:0.4,
loaderHtml:'

var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);

var croppicContainerModalOptions2 = {
uploadUrl:'img_save_to_file.php',
cropUrl:'img_crop_to_file.php',
modal:true,
imgEyecandyOpacity:0.4,
loaderHtml:'

var cropContainerModal2 = new Croppic('cropContainerModal2', croppicContainerModalOptions2);

The second div won't appear that loading animation, only the default cropContainerModal works the animation, why??? :( :(

I recive this error:

Uncaught SyntaxError: Unexpected token <

I have replicated the example in http://www.croppic.net/

Thank you for you appreciated support,
best regards
Amaro

Hi,

In your documentation you have this var cropperHeader = new Crop('yourId');... I suggest you to put var cropperHeader = new Croppic('yourId');.

Bye :-)

Hi,

How can i edit the script to make it unlimited zoom? I found the zoom function( zoom :function(x){ ) on the croppic.js but i have no idea how to edit.

Many thanks...

Hi,

I would like to use croppic (modal mode) on my website inside of a jQuery dialog box.
However when i selected an uploaded file, i do get the lightbox, and i do see the image and controls (which strangely enough are located in the centre of the screen), but i don't see the actual "crop frame", thus givng me the error: invalid dimensions.

I tried it in a blank page with and without a dialog box and there the code works.

Does this exist?

hi,
some fix for opera or idea how to use it?

thanks,
T.

What is the proper way to go about access JSON response data when using, for example, onAfterImgUpload()?

I saw on #17 that it was stated that the 2nd argument being passed into the function, onAfterImgUpload:function(arg1, arg2) would allow for accessing response data but it does not.

For now I'm having to use window.response but I wanted to confirm if there is a better way to go about this. Thank you for your help.

it's possible ??

Hello,

This is awesome except it not working in Safari web browser (5.1.7) at all. Please help how to use it in safari

Would be a nice addition - may open a pull request if not

great script...

I've created asp.net version of your script. How can i send you?

I am using your great plugin for setting up background images, it works perfectly when the user uploads big image sizes; however, it breaks when the image is smaller than the default container.

Could you please provide a quick fix where if the image is smaller than the container, the image would take the maximum container width and height?

Use touchit plugin to solve this issue..

https://github.com/danielglyde/TouchIt/

eg:

Hello!

I'm looking for a solution that the upload original images are delete from the server after the croppiing and after clicking the cancel-button.

Thank you very much!

Greetings

Steffen

I am using one croppic in my page, its working fine . now I want to use use multiple croppic in single page. if it possible please tell me how can i impliment this

The plugin throws the following error when it receives a Content-Type: application/json as a response once the image is uploaded:

Uncaught SyntaxError: Unexpected token o

I think that the plugin is parsing an already parsed json object. When the content type is changed to text/html this error doesn't happen.
The correct Header if we are returning a json object is "application/json" so i think this should be fixed appropriately.

Thanks guys for the good work.

Hey guy, your plugin looks great. Unfortunately I couldn't find in your doc if I can crop a pic which is already on my server.

Thanks for letting me know. Kind Regards

There was already an issue with this topic. The solution was a changing of the folder rights.
But my temp folder ist on 755 and i dont know wich other folder should have other right-restrictions.
I tried other restrictions - same error.
Is there an other solution?
I installed the complete dl-folder on my server.

By the way there is an issue on your documentation page:
"var cropperHeader = new Crop..." should be "var cropperHeader = new Croppic..."

Well, the title describes what has been happening. If someone want to test, just access http://www.croppic.net/.
Has anyone got this problem?

Thanks.

Hi,

first of all thank you for this great script. I'm trying to save the cropped and resized file to my server. I'm using Imagick for this. For some reason it seems not to work properly tough. I'm using:

$cropImage->cropImage($cropW, $cropH, $imgX1, $imgY1);

It resizes the image to the given width and height, but for X and Y it seems to always use 0, as I can move the image around where I want but it always gives me the same image area as output.

What am I doing wrong?

Thank you

Hi guys, Great Plugin, i am trying to add flip(not rotate) event next to zoom button but can't figure how to get, is there any way to be done. let me know how to do that, as am not good in jquery. and also is it possible to edit from same position once cropped, to edit again or zoom cropped image....???

Thanks

Hi,
I wanted to create an custom crop button (much like the customUploadButtonId but for croping) I saw that my users where having difficulties with the upload mostly because they forgot to crop and having an external button might do the trick. Unfortunatly I am not that good and after a few trials and failures I end up asking you guys for help.
Thanks.

I don't know if this issue belongs here, but on the website downloading example php files won't work. It just gets executed and all you download is a result of it.

Using this technique:
http://www.html5rocks.com/en/tutorials/file/dndfiles/

The cropping could be prepared before the file is uploaded so the image can be processed as soon as it is received by the server, and the user doesn't have to wait for the upload to be complete to start cropping.

wdyt ?

Is there a possibility to load the plugin with an amd library like require.js?

I really like this plugin. You've done a great job if I may say so.

I've added your plugin which is working at the moment. Only thing is I want to crop images in a square ( as in 200px x 200px).

I've tried changing the css style to make it a square but then it doesn't crop properly.

What files and values do I need to change to make it crop a square (200px x 200px)?

Thanks

Hi to everybody,

I just downloaded the script and built in a very simple html page...but I get this error in console:
Uncaught SyntaxError: Unexpected token < jquery-1.10.2.js:550

here is my code:

Any idea what I'm doing wrong?!

Thank you in advance
Marco

Hi! Somebody have repair the problem with the imgEyeCandy to false ? ...

Thanks for this awesome library!

I'm trying to implement into wordpress and the page loads fine.

As soon as I select an image, and click on open I get the following errors:

POST http://thehoneymoonfund.co.za/wordpress/wp-content/themes/honeyTheme/img_save_to_file.php - 500 Internal Server Error 1,55s
jquery1..._min.js (line 4)
"NetworkError: 500 Internal Server Error - http://thehoneymoonfund.co.za/wordpress/wp-content/themes/honeyTheme/img_save_to_file.php"
img_sav...ile.php
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
...ction(b){if(a.JSON&&a.JSON.parse)return a.JSON.parse(b+"");var c,d=null,e=m.trim...

In essence I get a 500 internal Server Error on the img_save_to_file.php file and a JSON unexpected character error on my Jquery1.11.1 file.

Please help, I urgently need to get this working.

Breaks older browser support but I'm wondering what value or functionality does it bring? It's a pretty simple data structure, is there a specific reason why it's used?

When i select an image, it doesn't show up in the box? I get the cropping tool bar at the top of the container, and the json result from img_save_to_file.php is all ok, but there is no image?

This happens on the http://www.croppic.net/ demo page.

To reproduce:

1. Go to http://www.croppic.net/ and open up the Console in IE
2. Click the "click here to try it" button
3. Select image and click open
4. Notice the error...

I used to have a problem with eye candy. It is supposed to create an image maintaining the alphas, however it always created some black background for me. This same problem also kept me from opening created files that were not .jpeg
I managed to find the cause of the problem that might save some time to some.

On the img_crop_to_file.php file, on line 51 we can see this little gem

 imagejpeg($dest_image, $output_filename.$type, $jpeg_quality);

This line creates an jpeg image of you cropped selection. However the use of jpeg isn't great since it keeps us from mainting the alpha.
The second problem is that when the program tries to create images with differents extensions but only puts different extensions at the end of a jpeg file. This is what blocks me while trying to open.
In my case i only create png file with a .png extension replacing the 51th line with:

imagepng($dest_image, $output_filename.".png");

Blocking to png keeps alpha

Hope it was not a total garbage (i am still new here^^)