画像がデータの場合はクロッパーが機能しません

Question

ユーザーがアップロードした画像をトリミングして、クロップ後にデータベースに保存します。 私はそれをするためにクロッパーかクロッパーを使用したいと思います。 サーバーにある画像を使用しても問題ありませんが、アップロードしたファイルを使用したい場合は、クロッパーでは機能しません。

<input type="file" id="fileinput" accept="image/*" /> 
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header" id="gallery"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myLargeModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-sm btn-dark" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-sm btn-default">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 
@section Scripts{ 

    @*<link href="~/lib/cropperjs/dist/cropper.css" rel="stylesheet" /> 
     <script src="~/lib/cropperjs/dist/cropper.js"></script>*@ 
    <link href="~/lib/cropper/dist/cropper.css" rel="stylesheet" /> 
    <script src="~/lib/cropper/dist/cropper.js"></script> 
    <script> 
     window.onload = function() { 
      var image;//= document.getElementById('image'); 
      var cropper; 


      $("#btn").click(function (event) { 
       cropper.getCroppedCanvas().toBlob(function (blob) { 
        var formData = new FormData(); 
        formData.append('croppedImage', blob); 
        $.ajax('/Home/Upload', { 
         method: "POST", 
         data: formData, 
         processData: false, 
         contentType: false, 
         success: function() { 
          console.log('Upload success'); 
         }, 
         error: function() { 
          console.log('upload Error'); 
         } 
        }) 
       }); 
      }); 
     } 
     var uploadfiles = document.querySelector('#fileinput'); 
     uploadfiles.addEventListener('change', function() { 
      var files = this.files; 
      if (files.length > 0) { 
       previewImage(this.files[0]); 
       image = document.getElementById('image'); 

       $('#image').cropper({ 
        aspectRatio: 16/9, 
        viewMode: 1, 
        autoCropArea: 1, 
        minContainerWidth: 700, 
        minContainerHeight:600 
       }); 
      } 

     }, false); 
     function previewImage(file) { 
      var galleryId = "gallery"; 

      var gallery = document.getElementById(galleryId); 
      var imageType = /image.*/; 

      if (!file.type.match(imageType)) { 
       alert("File Type must be an image"); 
      } 

      var thumb = document.createElement("div"); 
      thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div 

      var img = document.createElement("img"); 
      img.id = "image"; 
      img.style = "max-width:100%"; 
      //img.src = "images/banner1.svg"; //if I use this line everything is fine!!!! 
      img.file = file; 
      thumb.appendChild(img); 
      gallery.innerHTML = ''; 
      gallery.appendChild(thumb); 

      // Using FileReader to display the image content 
      var reader = new FileReader(); 
      reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); 
      reader.readAsDataURL(file); 

     } 
    </script> 
} 

Answer 1

この問題が見つかりました。私はなぜこの簡単な問題を見つけるために私の時間の多くを使用するのか分かりません。とにかくそれを将来必要とする人のためにここに書いています。 問題は、読者がデータを画像に設定した後にクロッパーが設定されていないことです。これを行うには、このようなものが必要です。

reader.onloadend = (function() { 
       $('#image').cropper({ 
        aspectRatio: 16/9, 
        viewMode: 1, 
        autoCropArea: 1, 
        minContainerWidth: 700, 
        minContainerHeight: 600 
       }); 
      });