javascript - 丰源辰收割机 : get the cropped image in base64

Question

真的不想在这里重复。

我正在使用

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

我引用了这些帖子:

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

Save cropped image from ng-src

Canvas 和图像的新手，很抱歉这个问题很琐碎。

我的环境是 JS、MVC

我的目标

我正在尝试将裁剪图像的结果以 base64 字符串形式保存到数据库中。

我已将其发布并保存，但图像与原始图像相同。

我需要将其转换为 Blob 吗？真的不确定那是做什么的。

我是否需要先创建 Canvas 然后获取数据...不知道该怎么做？

下面是我的代码

        //  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);
                }
            }
        });
    }

在此先感谢您的帮助。

Answer 1

我终于找到了问题所在，是我的后端错误处理了调用。

上面的代码工作得很好。

裁剪后的图像正在返回。

将它传递到我的 AJAX 是完美的。

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

请不要在这上面浪费任何时间。

感谢所有的帮助。