Fengyuanchen Cropper: get the cropped image in base64

Question

Really not trying to make a repeat here.

I am using

http://fengyuanchen.github.io/cropper/0.7.9/

I referenced these posts:

https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata

Save cropped image from ng-src

New to canvas and images, sorry for the question if this is trivial.

My environment is JS, MVC

My goal

I am trying to save the result of the cropped image to DB in base64 string.

I have it posting and saving but the image is the same as the original.

Do I need to convert it to a Blob? Really not sure what that does.

Do I need to first create a canvas and then get the data...not sure how to do that?

My code below

        //  cropper
    function loadCropper() {
        //var console = window.console || { log: function () { } };
        var $body = $('body');

        var $image = $('.img-container > img');
        var $actions = $('.docs-actions');
        var $dataX = $('#dataX');
        var $dataY = $('#dataY');
        var $dataHeight = $('#dataHeight');
        var $dataWidth = $('#dataWidth');
        var $dataRotate = $('#dataRotate');
        var $dataScaleX = $('#dataScaleX');
        var $dataScaleY = $('#dataScaleY');

        var options = {
            aspectRatio: 16 / 9,
            preview: '.img-preview',
            crop: function (e) {
                $dataX.val(Math.round(e.x));
                $dataY.val(Math.round(e.y));
                $dataHeight.val(Math.round(e.height));
                $dataWidth.val(Math.round(e.width));
                $dataRotate.val(e.rotate);
                $dataScaleX.val(e.scaleX);
                $dataScaleY.val(e.scaleY);
            },
            responsive: false,
            mouseWheelZoom: false,
            touchDragZoom: false,
            modal: false,

        };

        $image.cropper("destroy");
        $image.cropper(options);

        // Buttons
        if (!$.isFunction(document.createElement('canvas').getContext)) {
            $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
        }


        // Methods
        $actions.on('click', '[data-method]').off();
        $actions.on('click', '[data-method]', function () {
            var $this = $(this);
            var data = $this.data();
            var $target;
            var result;

            if ($this.prop('disabled') || $this.hasClass('disabled')) {
                return;
            }

            if ($image.data('cropper') && data.method) {
                data = $.extend({}, data); // Clone a new one

                if (typeof data.target !== 'undefined') {
                    $target = $(data.target);

                    if (typeof data.option === 'undefined') {
                        try {
                            data.option = JSON.parse($target.val());
                        } catch (e) {
                            //  console.log(e.message);
                        }
                    }
                }

                result = $image.cropper(data.method, data.option, data.secondOption);

                if (data.method === 'getCroppedCanvas' && result) {

                    //$image.cropper('getCroppedCanvas').toBlob(function (blob) {
                    //    console.dir(blob)
                    //});


                    var modal = $('#modal-image-edit'),
                        data = {
                            Value: result.toDataURL(),   //this is the same as the orignial
                            Tag: 2
                        };

                    afterControlEvent(data);
                }
            }
        });
    }

Thanks in advance for the help.

score 4 · Accepted Answer · answered Oct 09 '15 at 11:54

I finally hunted down the issue and it was my backend mishandling the call.

The code above works just fine.

The cropped image is getting returned.

passing this in to my AJAX is perfect.

                    var modal = $('#modal-image-edit'),
                    data = {
                        Value: result.toDataURL(),   //  this is the value of the cropped image                          Tag: 2
                    };

Please don't waste any time on this.

Thanks for all the help.

suhailvs · Answer 2 · 2022-08-10T07:27:00.690

var $image = $('#image');

$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(event) {}
});

// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

$("#get_base").on('click', function () {
  var base64 = $image.cropper('getCroppedCanvas').toDataURL();
  var photo = document.getElementById('result');
        
        photo.setAttribute('src', base64);
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>IdCrop</title>
    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css" crossorigin="anonymous">
  </head>

  <body>
    <div>
  <img id="image" src="https://fengyuanchen.github.io/jquery-cropper/images/picture.jpg" width="200px">
</div><br>
<button id="get_base" type="button">Crop</button><br>
    <img id="result" width="200px">
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/cropperjs/dist/cropper.js" crossorigin="anonymous"></script>
  <script src="https://fengyuanchen.github.io/jquery-cropper/js/jquery-cropper.js"></script>
  </body>
</html>

Fengyuanchen Cropper: get the cropped image in base64

2 Answers2