How to manage errors like on demo

[Keenjix]

Hi,

Thank you so much for your project, it's awesome and really helped me in my work. But I would like to display errors (image too small with outerwidth etc..) like on the demo website. I didn't find any documentation about it.

Can you help me, tell me how did you do ? I'm not a pro with API :$ Thank you !

[bloxidge]

Here's what I did. Assuming you've already got your main cropit function, add the "onImageError" option and copy the function from the demo (with a few tweaks) as the action.

<script>
    $(function() {
        $('.image-editor').cropit({
            imageBackground: true,
            imageBackgroundBorderWidth: 20,
            allowDragNDrop: true,
            exportZoom: 1,
            onImageError: function() {
                $(".error-msg").text("Please use an image that's at least " + $(".cropit-image-preview").outerWidth() + "px in width and " + $(".cropit-image-preview").outerHeight() + "px in height."), $(".cropit-image-preview").addClass("has-error"), window.setTimeout(function() {
                    return function() {
                        return $(".cropit-image-preview").removeClass("has-error")
                    }
                }(this), 3e3)
            }
        });
    });
</script>

[Keenjix]

Haha, I tried this afternoon, and got approximately the same code :P

$('.image-editor').cropit({
        exportZoom: 1,
        imageBackground: true,
        imageBackgroundBorderWidth: 15,
        allowDragNDrop: true,
        imageState: {
            src: '/core/images/default.jpg',
        },
        onImageError: function(e) {
            if (e.code === 1) {
                $('.error-msg').text("Please use an image that's at least " + $('.cropit-image-preview').outerWidth() + "px in width and " + $('.cropit-image-preview').outerHeight() + "px in height.");
                $('.cropit-image-preview').addClass("has-error")
                    window.setTimeout(function() {
                        return function() {
                            return $('.cropit-image-preview').removeClass("has-error")
                        }
                    }(this), 3e3)
            }
        }
    });

Difference is I verify the error.code, i don't know if it's right, but it's working actually. If the author can show us something which is "more official" because right now, it's only some merged codes, not really clean :)

[sidaurukfreddy]

Hello i did it but not working, why you configuationnot same like in doc,

[Keenjix]

It's just the Jquery part, here the css and html i used like the demo :

.cropit-image-preview .error-msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    background: rgba(210,65,72,0.8);
    line-height: 1.5;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -ms-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.cropit-image-preview.has-error .error-msg {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

<div class="cropit-image-preview-container">
        <div class="cropit-image-preview">
                 <div class="error-msg"></div>
        </div>
</div>

Hope it'll help you, waiting for the author's help :)

[sidaurukfreddy]

Hello thanks for respon @Keenjix will digging after this write comment done, i have a lot of question about crop and resize ?

1. Did you tested in mobile about crop images !
2. the errors came from because setting in css, am i right ? please correct ya this script

width: 250px; height: 250px;

by the way code you posted above what name file in demo folder is that bassic.html or form.html or image_background.html or pisca.html, thanks for respond

[Keenjix]

1. Nop, i'm not in that case, i don't need a mobile compatibility
2. I'm not sure of what you wanted to say sorry :x

At first, i used the basic one, and when I tried to manage errors, I checked the author's demo page, I looked at his JS and I tinked the code above. There is no "true" code, and this is what I regret and asking for :)

[sidaurukfreddy]

oh oke you use bassic.html ya, then who is the right js, did you posted above or someone commnet above ?

the reason why errors came from ? cause i read doc configuration images can handle by css, if the images less than width 450px and height 450px the erorrs came,but tried uplopad images more than 450px images can accept, please answer complete ya, Thanks

/-----edit----/ Please paste your whole code cause i got blank upload images, thanks

[Keenjix]

It's the same code for both of us, my code checks what kind of error is : (e.code ===1) means "image too small"

This is what you have in the documentation :

onImageError function
Called when image cannot be loaded.

{object} error - Error object.
{number} error.code - Error code. 0 means generic image loading failure. 1 means image is too small.
{string} error.message - A message explaining the error.

If the uploaded image size if smaller than the preview area, then the error message is displayed EXCEPT if you allow "smallImage".

[sidaurukfreddy]

Thanks for your support already solved, but i use this plugin in modal bootsrap for the first time click why errors already came up the fact i make more than height and width in css src: base_url + "asset/img/default-product.png",