2021-04-18 21:27:31 +01:00
|
|
|
var input = document.getElementById('save_avatar');
|
|
|
|
var container = document.getElementById('img-container');
|
|
|
|
var cropImage = document.getElementById('img-cropped');
|
|
|
|
var cropped = document.getElementById('save_hidden');
|
2020-08-05 19:07:38 +01:00
|
|
|
|
|
|
|
input.addEventListener('change', function (e) {
|
|
|
|
if (!input.files || !input.files[0]) return;
|
|
|
|
var reader = new FileReader()
|
|
|
|
reader.onload = function (e) {
|
2021-04-18 21:27:31 +01:00
|
|
|
container.style = 'display: block';
|
|
|
|
cropImage.setAttribute('src', e.target.result);
|
2020-08-05 19:07:38 +01:00
|
|
|
|
|
|
|
function update() {
|
2021-04-18 21:27:31 +01:00
|
|
|
var croppedCanvas = cropper.getCroppedCanvas();
|
|
|
|
cropped.value = croppedCanvas.toDataURL();
|
|
|
|
input.files = undefined;
|
2020-08-05 19:07:38 +01:00
|
|
|
}
|
|
|
|
var cropper = new Cropper(cropImage, {
|
|
|
|
aspectRatio: 1,
|
|
|
|
viewMode: 1,
|
|
|
|
cropend: update,
|
|
|
|
ready: update,
|
|
|
|
})
|
|
|
|
}
|
2021-04-18 21:27:31 +01:00
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
|
|
});
|