I have a form where the user will choose a profile image and a cover image.
So I'm using the Cropper.js to open and crop the image in the correct size.
In order not to have to repeat code unnecessarily, I thought about doing the script dynamically so that it works in both cases.
In the input file fields I put the file type that will be opened, and the dimensions of width and height in this way
data-imgtype="logo" data-imgw="500" data-imgh="500"
So I use a same modal for clipping, and I try to separate for each destination according to the selected option.
You can see the complete code here:
$(document).ready(function () {
$( ".imgcrop" ).change(function(){
var imgw = $(this).data('imgw');
var imgh = $(this).data('imgh');
var imgtype = $(this).data('imgtype');
var $modal = $('#modal');
var imageform = document.getElementById('eimg'+imgtype);
var cropimage = document.getElementById('mimagecrop');
var cropper = [];
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
cropimage.src = e.target.result;
$modal.modal('show');
}
reader.readAsDataURL(input.files[0]);
}
$modal.on('shown.bs.modal', function () {
cropper[imgtype] = new Cropper(cropimage, {
aspectRatio: imgw / imgh,
viewMode: 3,
});
});
$modal.on('hidden.bs.modal', function () {
cropper[imgtype].destroy();
cropper[imgtype] = null;
});
$( "#cropsave" ).click(function(){
var canvas;
$modal.modal('hide');
if (cropper[imgtype]) {
canvas = cropper[imgtype].getCroppedCanvas({ width: imgw, height: imgh });
imageform.src = canvas.toDataURL();
}
});
});
});img#eimglogo {
width: 150px;
}
img#eimgcapa {
width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet"/>
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<label class="label">
<img class="img-thumbnail img-responsive" id="eimglogo" src="https://via.placeholder.com/500">
<input type="file" class="sr-only imgcrop" id="inputlogo" data-imgtype="logo" data-imgw="500" data-imgh="500" name="image" accept="image/*">
</label>
<label class="label">
<img class="img-thumbnail img-responsive" id="eimgcapa" src="https://via.placeholder.com/1280x600">
<input type="file" class="sr-only imgcrop" data-imgtype="capa" data-imgw="1280" data-imgh="600" id="inputcapa" name="image" accept="image/*">
</label>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Cortar Imagem</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="mimagecrop" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="cropsave">Ok</button>
</div>
</div>
</div>
</div>When I open the image for the first time, it works perfectly for each type of image. But when I try for the next image, happens a error sending the result to the previous field.
Where am I going wrong?
I put $modal.on outside on-change function so it won't run multiple times