Search code examples
javascriptjcrop

Jcrop: after setImage jcrop does not take TrueSize when applying new image


I'm working with Jcrop and trying to fit it nicely in responsive layout. I decided that it will be destroyed on window.resize and reinitialized with TrueSize parameter (as suggested here: https://stackoverflow.com/a/33592528/2126308). But now I want to add option to update image by setImage, but on small screen after change the img, Jcrop resizing it back to img's original size. Should I destroy Jcrop and reinitialize again(as on resize) or I am doing something wrong?


Solution

  • I would like to share with my solution as I had looked into the code of that function which BTW wasn't too long:-) and it turned out that setImage function recalculates everything without considering the TrueSize dimensions which were passed on initialization. Only way to resolve this was to add another method to Jcrop. Unfortunately, and correct me if I am wrong, the Jcrop v0.9.12 had not been written to handle function overloading, so I have finished with custom Jcrop.

    To be specific, I have changed only the initial size on image laod

    ...
    img.onload = function () {
        var iw = img.width;
        var ih = img.height;
        ...
    }
    

    to

    ...
    img.onload = function () {
        var iw = $origimg.width();
        var ih = $origimg.height();
        ...
    }