Fengyuanchen Cropper: получить обрезанное изображение в 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

Новое на холст и изображения, извините за вопрос, если это тривиально.

Моя среда 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 
        }; 

Пожалуйста, не тратьте время на это.

Спасибо за помощь.