Fengyuanchen Cropper：获取base64中裁剪后的图像

Question

真的不想在这里重复。

我在用

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

我参考了这些帖子：

/sf/ask/349923591/

从 ng-src 保存裁剪后的图像

画布和图像新手，很抱歉问这个问题是否微不足道。

我的环境是JS、MVC

我的目标

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

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

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

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

我的代码如下

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

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

感谢您的所有帮助。