Image src is reloaded and draws again when Jcrop is applied to that image about jcrop HOT 20 OPEN

Oh dear, the formatting didn't go to plan! Obviously the jcropOptions are inside the Jcrop constructor as applied to the image object in question. Thanks.

from jcrop.

"The src is loaded into the" --> "The src is loaded into the image and draws correctly"

:-/

from jcrop.

I see from viewing the generated HTML source in Chrome, that how Jcrop works on an image is that the original image is made "display:none; visibility:hidden" and that a different image tag with the same src is made (nested in a div with class="jcrop-tracker") with "display:block; visibility:visible;" for the cropping magic to operate on.

I wonder if it something to with this? For example, Chrome fails to cache the image and reloads it again when Jcrop assigns the src to the new, generated image?

I am working on a separate testbed page to show you all but unfortunately I haven't been able to replicate the error outside of the current usage :-(

from jcrop.

i met the same problem :-(

------------update--------------------

i found a method in jquery.crop.js.

setImage(src, callback)

this method can change crop box image in live . but the image src didnt change . must use $.attr() .

from jcrop.

Thanks for the confirmation Sunchuo. I'm going to have a look at jquery.crop.js and see what I can find. I wonder if you have you been able to fix (or change?) this behaviour?

from jcrop.

Just out of interest Sunchou, I wonder if - like me - you are playing with Ajax when using Jcrop. I am requesting the image for cropping from a different server using cross domain Ajax.

from jcrop.

Ok, it looks like it's a Chrome problem: http://bugs.jquery.com/ticket/11075

from jcrop.

Aaaa, OK, I have managed to solve this issue by adding HTTP headers for caching (Cache-Control:max-age=xyz, Expires:Tue, some date) to my image server which returns the images that Jcrop operates on. (Luckily I am in control of the image server in this case!)

from jcrop.

I don't think this is desired behavior to have the resource loaded twice, reguardless whether it is cached for HTTP requests. Consider you are working with FileReader, and applying jCrop to prior to uploading. The load times for Blob elements can be relatively long while the browser it loading it into memory (especially for large files -- duh). At least with FileReader, we have an opportunity to track the loading of the image. Now, we have to track both the FileReader loading, as well as jCrop (which does not natively provide you callbacks to know when the image was finally initialized).

Not to mention there is sometimes an undesirable "flicker" when hiding the original to show the newly created "jcrop" image.

Please consider changing this behavior.

from jcrop.

But I don't think Jcrop itself can or should control the host browser's DOM / HTTP implementation.

I'm happy (and, OK, it's not up to me because I'm not a Jcrop developer!) that this isn't a Jcrop issue and is rather a Chrome-caching-when-using-dom-slash-ajax type of issue.

The flicker thing you mention sounds more like a Jcrop issue that should get fixed. Though I haven't experienced that myself so I can't really comment.

from jcrop.

Oh, sorry, you mean for Jcrop not to duplicate the (and its src) in the first place don't you? Yeah that would be super cool :-)

from jcrop.

the (and its src) --> the IMG (and its src)

from jcrop.

Oh, sorry, you mean for Jcrop not to duplicate the (and its src) in the first place don't you? Yeah that would be super cool :-)

This was what I meant, indeed.

from jcrop.

Hi guys, you can solve this problem by using
$(window).load(function(){
.....
});
insted of $(document).ready(function(){
.....
});

from jcrop.

Interesting! But do we know why that solves the issue?

from jcrop.

any solution for this issue ?

from jcrop.

Hi majuansari. I was able to mostly solve this issue by adding HTTP "expires" headers to the images in question - please see my comment about this above for more details.

from jcrop.

@danielrhodeswarp I fixed this issue converting blob file to base64

        var reader = new window.FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            base64data = reader.result;
            $('#jcrop_target_' + previewId).attr('src', base64data).Jcrop({
                aspectRatio: 4/3
            });
        }

Check the full code

$(".filestyle")
    .fileinput()
    .on('fileloaded', function(event, file, previewId, index, reader) {
        bootbox.dialog({
            title: 'Ajustar imagem',
            message: '<img src="" id="jcrop_target_' + previewId + '" class="img-responsive" />',
            buttons: {
                success: {
                    label: "Salvar",
                    className: "btn-flat btn-primary",
                    callback: function () {
                        console.log('Sucesso!')
                    }
                }
            }
        });

        var reader = new window.FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            base64data = reader.result;
            $('#jcrop_target_' + previewId).attr('src', base64data).Jcrop({
                aspectRatio: 4/3
            });
        }
    });

from jcrop.

I am using input type="file" id="uploadProfilePic" to fetch image from system. and put that image in
img id="uploadedImage" style="width: 100%; display: none" src="
and onload of this image cropp called. but without cropping and save if open another image the image is not refreshed. previous image is hold by 'jcrop-holder' class. How can i reload or refresh the new image??

from jcrop.

I solved the issue of black screen when reload by adding again the lines below in my DIV

<input type="hidden" id="x" name="x" />
 <input type="hidden" id="y" name="y" />
 <input type="hidden" id="w" name="w" />
 <input type="hidden" id="h" name="h" />
 <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />

from jcrop.