CropperJS and HTML5 Canvas - html

Question

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:
When the image is cropped, I need to put the cropped image in the canvas instead of the image control.
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">×</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>