Croppie should work just fine. Are you sure you are using it to output the correct format and quality?

.result({ 'base64', {width, height}, 'jpeg', 0.75, false })

Will make a jpg with 75% quality, not setting the quality will give quality 100% (and big files).

Ok thank you I was doing the same, but found there was another issue.

I am using the code like

$uploadCrop[j].croppie('result', {
    type: 'canvas',
        size: 'orignal',
        format: 'jpeg'
}).then(function (resp) {
    // upload via ajax
}); 

and after uploading it still becomes 3 times bigger.

check the same issue at git: https://github.com/Foliotek/Croppie/issues/287

did you get croppie to work? I'm looking at it just now but don't want to go down that path if it's buggy.

I recently purchased slim, and I can say it does exactly what it says and whilst $17 is not free, it saved me loads of time and gave a better finish than I could get on my own.

https://codecanyon.net/item/slim-image-cropper-responsive-uploading-and-ratio-cropping-plugin/16364167

@Mick79 yes it is working fine with me

@snapey I like the Slim library. Can you share the laravel code that saves image(s) from Slim ?

@michaelnguyen547

I think this was my total code for dealing with the image that was passed from the slim-equipped form;

        $slim = json_decode($request->photo);

        $img = $this->imageManager->make($slim->output->image);
        $img->save(storage_path() . '/app/public/cropped/photo-' . $member->legacyid . '.jpg');

        $img->resize(150,200)
                ->resizeCanvas(170,220,'center')
                ->resizeCanvas(0,5,'top',true)
                ->text($member->fullname,10,220, function ($font) {
                    $font->file(2);
                    $font->size(16);
                })
                ->save(storage_path() . '/app/public/bordered/photo-' . $member->legacyid . '.jpg');

$this->imageManager is an instance of Intervention library

most of the code is involved in making a canvas a little larger than the image onto which I can write the members name.

Form

<div class="col-xs-2">
        <div class="slim photoShadow" id="cropper"
            data-force-size="300,400"
            data-filter-sharpen="15"
            data-default-input-name="photo"
            data-instant-edit="true"
            data-will-remove="imageWillBeRemoved"
            @if($member->hasPhoto) data-edit="false" @else data-edit="true" @endif 
            data-label="{{ __('Click or drag image to here to add profile photo') }}"
            >
            <input type="file" accept="image/jpeg, image/gif, image/png"/>

            @if($member->hasPhoto) 
                <img src="{{ $member->photoUnrestricted }}" />
            @endif
        </div>
        <input type="hidden" name="photoDeleted" id="photoDeleted" value="0" />
        <script>
            function imageWillBeRemoved(data, remove) {
                if (window.confirm("Are you sure? This will completely delete the member's photo. Photo is not removed until you Save this page.")) {
                    remove();
                    $('#photoDeleted').val(1);
                }
            }
        </script>
    </div>