crop and resize image and then post to overwrite function

[dsfser]

Hello,

i have successfully implemented surpass in my laravel 5.0 installation. it work flawless.

i can upload, delete, replace images.

but i added a option to crop and resize the image using https://github.com/fengyuanchen/cropper.

i managed to get the modal popup opened and the picture in the resizer.

After that i have a canvas and using canvas to blob i want to upload the blob using surpass and replace the existing image like the overwrite function is doing inside js.blade.php.

some suggestions?

for now i have something like this:

$('.resizeCropModal').on('hidden.bs.modal', function () {
            cropBoxData = $image.cropper('getCropBoxData');
            canvasData = $image.cropper('getCanvasData');
            canvasImage = $image.cropper('getCroppedCanvas');

            console.log(cropBoxData);
            console.log(canvasData);

            $image.cropper('destroy');

            if (canvasImage.toBlob) {
                canvasImage.toBlob(
                        function (blob) {

                            var imgid = $('#resizeCropimage').attr('imgid');
                            var input = $('#'+ TUProducts.ids['input']);
                            var uploadUrl = $('#'+ TUProducts.ids['input']).attr('data-url');
                            var fileName = "upload.jpg";

                            TUProducts.formData = new FormData();
                            TUProducts.formData.append('file', blob, fileName);
                            TUProducts.formData['surpass_overwrite_id'] = imgid;

                            $('#'+ TUProducts.ids['input']).fileupload({
                                url: uploadUrl,
                                dataType: 'json',
                                // Enable image resizing, except for Android and Opera,
                                // which actually support image resizing, but fail to
                                // send Blob objects via XHR requests:
                                disableImageResize: /Android(?!.*Chrome)|Opera/
                                        .test(window.navigator && navigator.userAgent),
                                imageMaxWidth: 800,
                                imageMaxHeight: 800,
                                imageCrop: true // Force cropped images
                            })

                        },
                        'image/jpeg'
                );
            }
        });

Thank you.

[dsfser]

I have done some more testing and i am close i think:

$('.resizeCropModal').on('hidden.bs.modal', function () {

        var $image = $('#resizeCropimage');
        cropBoxData = $image.cropper('getCropBoxData');
        canvasData = $image.cropper('getCanvasData');
        canvasImage = $image.cropper('getCroppedCanvas');

        $(".select2-container").append(canvasImage);

        console.log(cropBoxData);
        console.log(canvasData);

        console.log('cropper destroy()');
        $image.cropper('destroy');

        if (canvasImage.toBlob) {
            canvasImage.toBlob(
                    function (blob) {

                        //TODO: upload and replace

                        var imgid = $('#resizeCropimage').attr('imgid');
                        var input = $('#'+ TUProducts.ids['input']);
                        var uploadUrl = '/surpass_replace';
                        var fileName = "upload.jpg";

                        var formData = new FormData();
                        formData.append('file', blob, fileName);
                        formData.append('_token', '{{ csrf_token() }}');
                        formData.append('surpass_overwrite_id', imgid);

                        $.ajax({
                            url: uploadUrl,
                            data: formData,
                            processData: false,
                            contentType: false,
                            type: 'POST',
                            success: function(data){
                                console.log(data);
                            }
                        });

                    },
                    'image/jpeg'
            );
        }
    });

i get this error message:

i think i need to add some more values to the formData:

FatalErrorException in Surpass.php line 276: Call to a member function getClientOriginalExtension() on a non-object

[dsfser]

changed Input::file($input_id) -> Input::file('image_upload')

now it works flawless!

now i can resize and crop my images and upload them using ajax post!

[SUKOHI]

Hi, dsfser. Thank you for your message.

And I guess you don't have issues now. That's great!