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](https://stackoverflow.com/questions/29944558/save-cropped-image-from-ng-src)

[Save cropped image from ng-src](https://stackoverflow.com/questions/29944558/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.