Wsrtjtyk

I have a testbed for CropperJS - I have included a working sample. It displays your camera, and when you click take a snapshot, it copied the current image to the canvas. However, I cannot get the following to work:

1. When the image is cropped, I need to put the cropped image in the canvas instead of the image control.


2. 
   

   I need to move the upload an image from actually clicking on the image to clicking the upload button.

   
   
   

   <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>