Как обрезать изображение в круговой с помощью Cropper Js? - PullRequest
Новая
       30

Как обрезать изображение в круговой с помощью Cropper Js?

0 голосов
/ 14 апреля 2020

В моем приложении я делаю опцию загрузки изображений, и в предварительном просмотре загруженный файл обрезается. Я попробовал некоторые примеры / решения, но не смог достичь желаемого результата.

Я пробовал следующее,

JavaScript

        var canvas  = $("#canvas"),
            context = canvas.get(0).getContext("2d"),
            $result = $('#result'),
            upload =  document.querySelector('#fileInput');   
            upload.addEventListener('change', function(){
            if (this.files && this.files[0]) {
              if ( this.files[0].type.match(/^image\//) ) {
                var reader = new FileReader();
                  var downloadImg = '';
                   reader.onload = function(evt) {
                       $result.empty();
                   var img = new Image();
                   img.onload = function() {
                     context.canvas.height = img.height;
                     context.canvas.width  = img.width;
                     context.drawImage(img, 0, 0);

                     var cropper = canvas.cropper({
                       aspectRatio: 1,
                              crop: function(event) {
                                multiple: true;
                              }                          
                     }); 
                     $('#btnCrop').one('click',function(event) {
                         event.preventDefault();
                        var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 
                        $result.append( $('<img>').attr('src', croppedImageDataURL) );
                         $('#btnDownload').attr('href', croppedImageDataURL);

                     });
                     $('#btnRestore').click(function() {
                       canvas.cropper('reset');
                       $result.empty();
                     });

                   };
                     canvas.cropper('destroy'); 
                   img.src = evt.target.result;
                        };
                reader.readAsDataURL(this.files[0]);
              }
            }
        });

Html

    <input type="file" id="fileInput" accept="image/*" /> 
    <canvas id="canvas"></canvas>

Css

    .cropper-view-box,
.cropper-face {
  border-radius: 50%;
}

Я мог управлять урожаем, но получил обрезку при нагрузке. Я хочу, чтобы при загрузке файла я хотел, чтобы изображение было предварительно просмотрено в <canvas>, а круглая рамка обрезки обрезает изображение и отображается в <div id="result">

...