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

画布和图片的新手，如果这是微不足道的话，很抱歉。

我的环境是 JS，MVC

我的目标

我正在尝试将裁剪后的图像的结果保存到base64字符串中的DB。

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

我需要将其转换为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
                    };

请不要浪费任何时间。

感谢您的帮助。

Fengyuanchen Cropper：获取base64

1 个答案: