CropperJS и HTML5 Canvas

Question

У меня есть испытательный стенд для CropperJS - я включил рабочий образец. Он отображает вашу камеру, и когда вы нажимаете снимок, он копирует текущее изображение на холст. Однако я не могу заставить работать следующее:

1. Когда изображение обрезается, мне нужно поместить обрезанное изображение на холст вместо элемента управления изображением.

2. Мне нужно переместить загрузку изображения с фактического нажатия на изображение к нажатию кнопки загрузки.

   <link href="Styles/bootstrap/v4.1.2/bootstrap.min.css" rel="stylesheet" />
   <link href="Styles/cropper.css" rel="stylesheet" />
   <link href="Styles/Site.css" rel="stylesheet" />
   

   <div class="row">
     <div class="col">
         <video playsinline autoplay></video>
         <canvas id="imageCanvas"></canvas>
     </div>
   </div>
   
   <div class="row">
         <button>Take snapshot</button>
         <button id="btnUploadImage">Upload Image</button>
   </div>
   
   <div class="row">   
   
     <label class="label" data-toggle="tooltip" title="Upload A New Image">
       <img class="rounded" id="avatar" src="./Images/Cardholders_72x72.png" alt="avatar">
       <input type="file" class="sr-only" id="input" name="image" accept="image/*">
     </label> 
   
     <!-- Modal -->
   
     <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalLabel">Crop your image.</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
             <div class="img-container">
               <img id="image" src="./Images/Cardholders_72x72.png">
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
             <button type="button" class="btn btn-primary" id="crop">Crop</button>
           </div>
         </div>
       </div>
     </div>   
   
   </div>  
   

   <script src="Scripts/jquery-3.3.1.min.js"></script>
   <script src="Scripts/bootstrap.bundle.min.js"></script>
   <script src="Scripts/cropper.js"></script>
   
   <!-- This Script is for the Cropper -->
   <script>
     window.addEventListener('DOMContentLoaded', function ()
     {
       var avatar = document.getElementById('avatar');
       var image = document.getElementById('image');
       var input = document.getElementById('input');
   
       var $modal = $('#modal');
       var cropper;
   
       input.addEventListener('change', function (e)
       {
         var files = e.target.files;
   
         var done = function (url) {
           input.value = '';
           image.src = url;
           $modal.modal('show');
         };
   
         var reader;
         var file;
         var url;
   
         if (files && files.length > 0)
         {
           file = files[0];
   
           if (URL)
           {
             done(URL.createObjectURL(file));
           }
           else if (FileReader)
           {
             reader = new FileReader();
             reader.onload = function (e)
             {
               done(reader.result);
             };
             reader.readAsDataURL(file);
           }
         }
       });
   
       $modal.on('shown.bs.modal', function ()
       {
         cropper = new Cropper(image,
           {
           aspectRatio: 1,
           viewMode: 3
         });
       }).on('hidden.bs.modal', function ()
       {
         cropper.destroy();
         cropper = null;
       });
   
       document.getElementById('crop').addEventListener('click', function () {
         var initialAvatarURL;
         var canvas;
   
         $modal.modal('hide');
   
         if (cropper) {
           canvas = cropper.getCroppedCanvas({
             width: 160,
             height: 160
           });
   
           initialAvatarURL = avatar.src;
           avatar.src = canvas.toDataURL();  
   
           canvas.toBlob(function (blob)
           {
             var formData = new FormData();
   
             formData.append('avatar', blob, 'avatar.jpg');
   
           });
         }
       });
     });
   </script>
   
   <!-- This script is for the camera and snapshot -->
   <script>
   
     'use strict';
   
     // Put variables in global scope to make them available to the browser console.
     const video = document.querySelector('video');
     const canvas = window.canvas = document.querySelector('canvas');
     canvas.width = 480;
     canvas.height = 360;
   
     const button = document.querySelector('button');
   
     button.onclick = function ()
     {
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
       canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
     };
   
     var constraints = {
       audio: false,
       video: {
         width: { min: 320, ideal: 320, max: 640 },
         height: { min: 400, ideal: 400, max: 480 },
         aspectRatio: { ideal: 1.25 }
       }
     };
   
     function handleSuccess(stream) {
       window.stream = stream; // make stream available to browser console
       video.srcObject = stream;
     }
   
     function handleError(error) {
       console.log('navigator.getUserMedia error: ', error);
     }
   
     navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
   
   </script>