He montado para una pequeña biblioteca de recetas de cocina con un gestor de imagenes realizado con croopie.
El script carga la imagen, la re dimensiona y la recorta pero el problema, cuando giro la imagen y la fijo, es que recorta demasiado y deja en negro una zona de la imagen
Os dejo un ejemplo a ver si podéis descubrir donde fallo, por que ya le he dado demasiadas vueltas y seguro que ya no lo veo. ejemplo funcionado
El script está con boostrap4 y jquery 3.4.1
tiene un límite de 5 imágenes para subir, que se configura en el propio js
Al cargar y aplicar la redimensión y recorte de cada imagen se pone en una fila de una tabla ya recortada.
la imagen a exportar toma sus dimensiones de una variables .
var anchoExport = 900;
var altoExport = 500;
croppie, en sus valores de ancho y alto para el visor de imagen toma el ancho de del div que lo contiene y procesa los valores necesarios para que sea "responsive" (no real por que no cambia al cambiar el tamaño de la ventana pero por ahora me vale.
var boundaryW = $("#visor").width();
por regla de tres obtengo el alto
var boundaryH = (altoExport * boundaryW) / anchoExport;
hay mas variables para determinar que sea jpg, el tamaño, la zona de recorte... y oculta y muestra elementos dependiendo del paso en el que esté, subir, aceptar, borrar...
Este es el script funcionando:
var num = 0; // el contador de filas comienza en 1
var max = 5; // controla el numero maximo de filas
$(document).ready(function() {
$("#maximg").html('' + max + '');
});
$(document).on('click', '.image-cancel', function() {
let no = $(this).data('no');
$(".preview-image.preview-show-" + no).remove();
max = max + 1; //controla el maximo de items
verificaMaximo(max)
});
var anchoExport = 900;
var altoExport = 500;
var boundaryW = $("#visor").width();
var boundaryH = (altoExport * boundaryW) / anchoExport;
var viewportW = boundaryW - 100;
var viewportH = (boundaryH * viewportW) / boundaryW;
var maxUploadSize = "4194304";// en bytes
var maxUploadSizeMB = ((maxUploadSize / 1024)/1024)
function verificaMaximo(max) {
$("#maximg").html('' + max + ''); //coloca el numero de imagenes en el titulo
if (max <= 0) { // verifica si se ha alcanzado el limite
$('#previewImage').addClass("d-none"); // oculta preview
$('.btn-upload-image').addClass("d-none");
$('.rowPrevisualizar').addClass("d-none");
} else {
$('#previewImage').removeClass("d-none"); // muestra preview
$('.btn-upload-image').removeClass("d-none");
$('.rowPrevisualizar').removeClass("d-none");
}
}
var resize = $('#previewImage').croppie({
url: 'recipe-default.png',
enableExif: false,
enableOrientation: true,
viewport: { // Default { width: 100, height: 100, type: 'square' }
width: viewportW,
height: viewportH,
type: 'square' //square - circle
},
boundary: {
width: boundaryW,
height: boundaryH
}
});
// Al cambiar el campos de archivo
$('.usrSelectImage').on('change', function() {
//tomamos el indice 0 del atributo image por que es una unica imagen
var usrSelectImage = this.files[0];
if (usrSelectImage['type'] != 'image/jpeg') {
//ponemos a 0 el campo file
$('.usrSelectImage').val(null);
//alerta suave
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '!Sólo se permiten imágenes jpg¡',
timer: 6500
});
//verificamos que sea menos de maxUploadSize (mb = 1048576 bytes)
} else if (usrSelectImage['size'] > maxUploadSize) {
$('.usrSelectImage').val(null);
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '!El tamaño de la imagen no debe pesar más de '+maxUploadSizeMB+' mb¡',
timer: 6500
});
} else {
$('.btn-upload-image').addClass("d-none");
$('.btn-rotate-left').removeClass("d-none");
$('.btn-rotate-right').removeClass("d-none");
$('.btn-aplicar-image').removeClass("d-none");
$('.btn-borrar-image').removeClass("d-none");
$('#visor').removeClass("d-none");
$('.rowPrevisualizar').addClass("d-none");
var reader = new FileReader();
reader.onload = function(e) {
resize.croppie('bind', {
url: e.target.result
}).then(function() {
// console.log('jQuery bind complete');
});
}
reader.readAsDataURL(usrSelectImage);
}
});
$('.btn-aplicar-image').on('click', function(ev) {
resize.croppie('result', {
circle: false,
// size: 'viewport',
size: {
width: anchoExport,
height: altoExport
},
type: 'base64',
format: 'jpeg',
}).then(function(img) {
var rutaImagen = event.target.result;
$('#visor').addClass("d-none");
$('.btn-rotate-left').addClass("d-none");
$('.btn-rotate-right').addClass("d-none");
$('.btn-aplicar-image').addClass("d-none");
$('.btn-borrar-image').addClass("d-none");
$('.btn-upload-image').removeClass("d-none");
var html = '<tr class="preview-image preview-show-' + num + '">' +
'<td>' +
'<img id="pro-img-' + num + '" src="' + img + '" width="100px">' +
'<input id="image' + num + '" name="image' + num + '" class="d-none" type="text" value="' + img + '">' +
'</td>' +
'<td><div class="image-cancel btn btn-danger" data-no="' + num + '"><i class="fas fa-times-circle"></i></div></td>' +
'</tr>';
$('.preview-images-zone').append(html);
num++;
max--;
verificaMaximo(max);
//
/////////////////// reinica el visor
$('#previewImage').croppie('destroy');
var resize = $('#previewImage').croppie({
url: 'recipe-default.png',
enableExif: false,
enableOrientation: true,
viewport: { // Default { width: 100, height: 100, type: 'square' }
width: viewportW,
height: viewportH,
type: 'square' //square - circle
},
boundary: {
width: boundaryW,
height: boundaryH
}
});
/////////////////// reincia el visor
});
});
$('.btn-borrar-image').on('click', function() {
$('.previsualizar').attr('src', 'recipe-default.png');
$('.usrSelectImage').val(null);
$('#visor').addClass("d-none");
$('.rowPrevisualizar').addClass("d-none");
$('.btn-rotate-left').addClass("d-none");
$('.btn-rotate-right').addClass("d-none");
$('.btn-upload-image').removeClass("d-none");
$('.btn-aplicar-image').addClass("d-none");
$('.btn-borrar-image').addClass("d-none");
//$('#usrImage').val('null');
//$( "#usrImage" ).remove();
verificaMaximo(max);
$('#previewImage').croppie('destroy');
var resize = $('#previewImage').croppie({
url: 'recipe-default.png',
enableExif: false,
enableOrientation: true,
viewport: { // Default { width: 100, height: 100, type: 'square' }
width: viewportW,
height: viewportH,
type: 'square' //square - circle
},
boundary: {
width: boundaryW,
height: boundaryH
}
});
});
//rotar
$(".btn-rotate-right").click(function() {
$('#previewImage').croppie('rotate', parseInt($(this).data('rotate')));
});
$(".btn-rotate-left").click(function() {
$('#previewImage').croppie('rotate', parseInt($(this).data('rotate')));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Tooltip App -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="http://localhost/offerdocker/vistas/plugins/sweetalert2/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<!-- Content Header (Page header) -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Gestor de imagen</h3>
</div>
<div class="card-body">
<div class="text-center">
<div class="row">
<div class="col-sm-12" id="visor">
<input type="file" id="usrSelectImage" class="usrSelectImage d-none">
<div id="previewImage"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row rowPrevisualizar d-none">
<img class="previsualizar product-image" src="recipe-default.png" alt="" width="100%">
<p> </p><br>
</div>
<div class="row">
<label for="usrSelectImage" class="btn btn-app text-primary btn-upload-image"><i class="fas fa-cloud-upload-alt"></i> Subir archivo</label>
<button type="button" class="btn btn-app btn-aplicar-image text-success d-none"><i class="fas fa-check"></i> Aplicar</button>
<button type="button" class="btn btn-app btn-borrar-image text-danger d-none"><i class="fas fa-times"></i> Borrar </button>
<button type="button" data-rotate="-90" class="btn btn-app text-info btn-rotate-left d-none"><i class="fas fa-undo-alt"></i> Izquierda </button>
<button type="button" data-rotate="90" class="btn btn-app text-info btn-rotate-right d-none"><i class="fas fa-redo-alt"></i> Izquierda </button>
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- right column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title"><span id="maximg"></span> Imágenes disponibles</h3>
</div>
<div class="card-body">
<div class="row">
<style>
.preview-images-zone {
width: 100%;
border: 1px solid #ddd;
}
.preview-images-zone>.preview-image {
border: 1px solid #ddd;
}
</style>
<table style="width:100%">
<tr>
<th></th>
<th></th>
</tr>
<tbody class="preview-images-zone">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
También está en jsfiddle. Mil gracias a todos/as