Integrating Image Cropper

Question

User944339287 posted

Hi guys.. i found an interesting cropper from the internet.

i wonder how can i integrate with my web application, save the cropped image to a certain folder instead of downloading to desktop when [Get Cropped Canvas] button is clicked?

https://fengyuanchen.github.io/cropper/

Answer 1

User61956409 posted

Hi kengkit,

i wonder how can i integrate with my web application, save the cropped image to a certain folder instead of downloading to desktop when [Get Cropped Canvas] button is clicked?

In documentation of Cropper.js, we can find it provides getCroppedCanvas([options]) method that enable us to access and operate cropped image based on our actual requirement.

https://github.com/fengyuanchen/cropperjs#getcroppedcanvasoptions

For example, upload cropped image to server:

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
cropper.getCroppedCanvas().toBlob((blob) => {
  const formData = new FormData();

  formData.append('croppedImage', blob);

  // Use `jQuery.ajax` method
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success() {
      console.log('Upload success');
    },
    error() {
      console.log('Upload error');
    },
  });
});

Besides, if you'd like to save blob as file, you can try to use FileSaver.js  

https://github.com/eligrey/FileSaver.js/

With Regards,

Fei Han

Answer 2

User-1038772411 posted

Hii Kengkit,

Try with this flow, I hope this will help you.

Define the Select and Upload button on html, and a div with id="main-cropper"

<div>
            <div>
                <div id="main-cropper"></div>
                <a class="button actionSelect">
                    <input type="file" id="select" value="Choose Image" accept="image/*">
                </a>
                <button class="actionUpload">Upload</button>
            </div>
        </div>

on JS code, attach the croppie object to the dive, define the viewpoint an boundary, and finally send the request to the server to store the result as blob. On the server side the will be a Create controller with GetImage action waiting for the request. testFileName.png is assigned as file name, and you can modify it based on your scenario.

var basic = $('#main-cropper').croppie({
            viewport: { width: 200, height: 300 },
            boundary: { width: 300, height: 400 },
            showZoomer: false
        });

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#main-cropper').croppie('bind', {
                        url: e.target.result
                    });
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $('.actionSelect input').on('change', function () { readFile(this); });
        $('.actionUpload').on('click', function() {
            basic.croppie('result','blob').then(function(blob) {
                var formData = new FormData();
                formData.append('filename', 'testFileName.png');
                formData.append('blob', blob);
                var MyAppUrlSettings = {
                    MyUsefulUrl: '@Url.Action("GetImage","Create")'
                }

                var request = new XMLHttpRequest();
                request.open('POST', MyAppUrlSettings.MyUsefulUrl);
                request.send(formData);
            });
        });

on server side, in Create controller:

[HttpPost]
    public ActionResult GetImage(string filename, HttpPostedFileBase blob)
    {
        var fullPath = "~/Images/" + filename;
        blob.SaveAs(Server.MapPath(fullPath));
        return Json("ok");
    }

Thank you.

Answer 3

User-1038772411 posted

Hello Kengkit,

Try with this steps , I hope this wil help you

Define the Select and Upload button on html, and a div with id="main-cropper"

<div>
            <div>
                <div id="main-cropper"></div>
                <a class="button actionSelect">
                    <input type="file" id="select" value="Choose Image" accept="image/*">
                </a>
                <button class="actionUpload">Upload</button>
            </div>
        </div>

on JS code, attach the croppie object to the dive, define the viewpoint an boundary, and finally send the request to the server to store the result as blob. On the server side the will be a Create controller with GetImage action waiting for the request. testFileName.png is assigned as file name, and you can modify it based on your scenario.

 var basic = $('#main-cropper').croppie({
            viewport: { width: 200, height: 300 },
            boundary: { width: 300, height: 400 },
            showZoomer: false
        });

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#main-cropper').croppie('bind', {
                        url: e.target.result
                    });
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $('.actionSelect input').on('change', function () { readFile(this); });
        $('.actionUpload').on('click', function() {
            basic.croppie('result','blob').then(function(blob) {
                var formData = new FormData();
                formData.append('filename', 'testFileName.png');
                formData.append('blob', blob);
                var MyAppUrlSettings = {
                    MyUsefulUrl: '@Url.Action("GetImage","Create")'
                }

                var request = new XMLHttpRequest();
                request.open('POST', MyAppUrlSettings.MyUsefulUrl);
                request.send(formData);
            });
        });

on server side, in Create controller:

 [HttpPost]
    public ActionResult GetImage(string filename, HttpPostedFileBase blob)
    {
        var fullPath = "~/Images/" + filename;
        blob.SaveAs(Server.MapPath(fullPath));
        return Json("ok");
    }

Thank you