Hola chicos, estoy atascado con la biblioteca javascript cropper.js. Quiero inicializar cropper cuando se carga la imagen. Hice una función llamada temp, que se activa cuando se cambia el archivo de tipo de entrada, eche un vistazo al código html
<input type="file" name="cropableImage" id="cropableImageId" onchange="temp(this)" />javascript
function temp(input) { if(input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#previewHolder').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); $("#main_image_section").show(); $("#choose_file").hide(); $("#tools_section").show(); const image=document.getElementById('previewHolder'); cropper = new Cropper(image, { zoomable: true, scalable:true, rotatable:true, autoCropArea:0.5, background:false, modal:true, autoCrop: true, viewMode: 0, cropBoxResizable:true, setDragMode:true, }); } else { alert('select a file to see preview'); $('#previewHolder').attr('src', ''); } }la función se está ejecutando y la imagen se carga cuando selecciono la imagen. No se muestra ningún error en la consola. pero el cropper no se inicializó.
funciona cuando realizo esta acción de otra manera. Como hice un botón y cuando se hace clic en el botón, se ejecuta la función y se inicializa el recortador.
pero lo necesito inicializado cuando se carga la imagen.
El reader debe tomarse un tiempo antes de leer el archivo que ha subido. Eso significa que se llama al new Cropper antes de que se haya ejecutado la función reader.onload .
Si desea que cropper se ejecute después de leer el archivo, mueva la inicialización de Cropper dentro de la devolución de llamada de onload , después de asignar el src de la imagen del titular de la vista previa.
let cropper; const previewHolder = document.getElementById("previewHolder"); function temp(input) { if (input.files.length) { const reader = new FileReader(); reader.onload = function (e) { // Here the image is loaded. // Set it to the preview holder. previewHolder.src = e.target.result; // Now the cropper should be able to use the loaded image. cropper = new Cropper(previewHolder, { zoomable: true, scalable: true, rotatable: true, autoCropArea: 0.5, background: false, modal: true, autoCrop: true, viewMode: 0, cropBoxResizable: true, setDragMode: true, }); }; reader.readAsDataURL(input.files[0]); } }