export as width height

[h-rafiee]

hi my friend is anyway that can i export with width and height, i have responsive view but all picture must be export as width:800 height:100

if i could ('export',{ width : 800, height :100 })

[saiboten]

Hi,

We have the same issue. We have a responsive page, so the preview size changes based on device, but this also affects the export size, which we want to be in a fixed width/height.

[jupitercow]

This is what i did to address this problem:

/**
 * Throttle Resize-triggered Events
 * Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
 * ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
 */
var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
        if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();


var timeToWaitForLast = 100, // How often to run the resize event during resize (ms)
    $imageCropper; // Set up a global object to hold image cropper container

/**
 * Runs on window resize
 */
function resizeHandler()
{
    /**
     * Adjust the size of the preview area to be 100% of the image cropper container
     */
    if ( $imageCropper )
    {
        var finalWidth  = 1024, // The desired width for final image output
            finalHeight = 850, // The desired height for final image output
            sizeRatio   = finalHeight / finalWidth,
            newWidth    = $imageCropper.width(),
            newHeight   = newWidth * sizeRatio,
            newZoom     = finalWidth / newWidth;
        $imageCropper.cropit('previewSize', { width: newWidth, height: newHeight });
        $imageCropper.cropit('exportZoom', newZoom);
    }
}

document.addEventListener('DOMContentLoaded', function() {

    /**
     * Set up the image cropper when the DOM is loaded
     */
    $imageCropper = jQuery('#image-cropper');
    $imageCropper.cropit({
        exportZoom: 3, // This will get adjusted when we change the size of the preview
        onImageLoaded: function() {
            resizeHandler();
        },
    });

    /**
     * Set up the resize event
     */
    resizeHandler();
    window.addEventListener('resize', function() {
        waitForFinalEvent(resizeHandler, timeToWaitForLast, 'mainresize');
    });
});

This CSS sets the initial fallback size of the preview

.cropit-image-preview {
    height: 213px;
    width: 256px;
}

[phpMagpie]

Thanks for sharing this ... with a little adjustment, we now have responsive modal based cropit controls in our CMS!

[mohsincynexis]

Hello all I am facing a problem while doing this:- I have a browse button and I have written a function on its change and as soon as the user browse any image I takes the image tmp path using this and calls the picture modal function

tmppath = URL.createObjectURL(event.target.files[0]);
            load_picture_modal();

that has code

function load_picture_modal(){
$('#event-picture-modal').modal();
        /*!// Sets image source.*/
        $('.image-editor').cropit('imageSrc', tmppath);
}

which then opens up the modal and set the browsed image but then re-sizing is not working properly. I have one more browse button in the modal and when I selects the image using that Its works properly.

Can you guys help me out finding solution for this.

Thanks Mohsin

[mohsincynexis]

Here is the complete code :-:

/*function to browse image from the upload file button show default*/
    $(".browseImage .input-group-btn").change(function(event){
        event.preventDefault();
        if(openEventPictureModal)
        {
            tmppath = URL.createObjectURL(event.target.files[0]);
            load_picture_modal();
        }
        else
            document.getElementById("uploadFile").value = "";

    });


    function load_picture_modal(){
        $('#event-picture-modal').modal();
        /*!// Sets image source.*/
        $('.image-editor').cropit('imageSrc', tmppath);
    }

[jupitercow]

Does your modal script have any callbacks? Right now you are calling the modal, but not waiting for it to set up before activating cropit. If there is an onload callback, that is where you want to call cropit().

This seems like a new topic though...

[mohsincynexis]

Now I Have solved it by using the modal shown.bs.modal callback. Now using this callback I am setting the default image.

Also can it possible to make it like twitter to zoom out the small images if they are not zoomable though?

[hovi731]

Hello everyone : How can i use this method with imageState option? Thank You !

[noo-zh]

I've just solved this for the fork ezcrop written in Vanilla JS (https://github.com/noo-zh/ezcrop, update 0.0.3, a new option exportWidth). So, you can update cropit to use it too.