¿Cambiar el tamaño antes de cargar?

Un usuario preguntó 👇

¿Se puede volver a cambiar la imagen antes de cargarla, ya que las imágenes de la cámara del teléfono son tan grandes en estos días? Esperaba utilizar los filtros wfu_before_upload, wfu_before_file_check o wfu_before_file_upload, pero estos no permiten modificar la imagen de origen.

(@nickboss)

Hace 1 año, 2 meses

Hola, es posible que pueda utilizar el filtro wfu_after_file_loaded.

Este filtro se ejecuta después de que el archivo esté completamente cargado en el servidor. Permite realizar comprobaciones personalizadas sobre su contenido y rechazarlo o aceptarlo.

¿Lo has probado?

Acerca de

Nickolas

(@alexsbecker)

Hace 1 año, 2 meses

Realmente estaba buscando algo que cambiara el tamaño del cliente. No puedo verlo correctamente en este momento, por lo que es posible que no me entiendan, pero parece que necesito un gancho que me permita tomar el archivo de imagen, modificarlo y luego restaurarlo. a la función principal. No he visto un gancho que me permita restaurar una imagen.

(@nickboss)

Hace 1 año, 2 meses

El tamaño también se puede cambiar desde el punto de vista del cliente. ¿Tiene alguna biblioteca Javascript específica para la conversión de imágenes?

Nickolas

(@alexsbecker)

Hace 1 año, 2 meses

Nada específico. Puedo investigarlo y publicarlo aquí.

(@nickboss)

Hace 1 año, 2 meses

ok, ya he preparado un fragmento de código que puede procesar el contenido del archivo antes de que se cargue.

Nickolas

(@alexsbecker)

Hace 1 año, 2 meses

De acuerdo, estaba buscando cosas y encontré una solución que funciona para mí. 1. Continuando este StackOverflow, Creé una función: resizePhotos (id, maxSize). Guardé esto para el archivo «client-resize.js» y puse el script como de costumbre en las funciones my.php. 2. Esta función debería dispararse en el evento de intercambio para la entrada # upfile_1 con id = ‘upfile_1 ′, y tengo un máximo establecido en 500. 3. La función restablece la imagen y la envía a blob y datos, que se pueden recuperar usando el evento «imageResized» (usando «jQuery (documento) .on (» imageResized «, función (evento) {…»)

Probé la función y confirmé que puede recuperar y cambiar la imagen cuando la ejecuto manualmente en las herramientas de desarrollo. Lo que no puedo entender es 1) cómo agregar la función al evento de intercambio # upfile_1 porque no puedo averiguar cómo esperar hasta que se cargue # upfile_1 y 2) cómo eliminar el blob o dataurl compárelo y devuélvalo en el formulario para cargarlo.

client-resize.js:

//Requires jQuery
//Thanks to https://stackoverflow.com/users/689298/ferics2

	
//takes the upload element id ("upfile_1") and a maxSize to resize, ideally on a change event
window.resizePhotos = function(id, maxSize){
	console.log('resizing');
	// Read in file
		var file = document.getElementById(id).files[0];

	// Ensure it's an image
	if(file.type.match(/image.*/)) {
		console.log('An image has been loaded');

		// Load the image
		var reader = new FileReader();
		reader.onload = function (readerEvent) {
			var image = new Image();
			image.onload = function (imageEvent) {

				// Resize the image
				var canvas = document.createElement('canvas'),
					max_size = maxSize,
					width = image.width,
					height = image.height;
				if (width > height) {
					if (width > max_size) {
						height *= max_size / width;
						width = max_size;
					}
				} else {
					if (height > max_size) {
						width *= max_size / height;
						height = max_size;
					}
				}
				canvas.width = width;
				canvas.height = height;
				canvas.getContext('2d').drawImage(image, 0, 0, width, height);
				var dataUrl = canvas.toDataURL('image/jpeg');
				var resizedImage = dataURLToBlob(dataUrl);
				jQuery.event.trigger({
					type: "imageResized",
					blob: resizedImage,
					url: dataUrl
				});
			}
			image.src = readerEvent.target.result;
		}
		reader.readAsDataURL(file);
	}
};

/* Utility function to convert a canvas to a BLOB      */
var dataURLToBlob = function(dataURL) {
	var BASE64_MARKER = ';base64,';
	if (dataURL.indexOf(BASE64_MARKER) == -1) {
		var parts = dataURL.split(',');
		var contentType = parts[0].split(':')[1];
		var raw = parts[1];

		return new Blob([raw], {type: contentType});
	}

	var parts = dataURL.split(BASE64_MARKER);
	var contentType = parts[0].split(':')[1];
	var raw = window.atob(parts[1]);
	var rawLength = raw.length;

	var uInt8Array = new Uint8Array(rawLength);

	for (var i = 0; i < rawLength; ++i) {
		uInt8Array[i] = raw.charCodeAt(i);
	}

	return new Blob([uInt8Array], {type: contentType});
}

/* Handle image resized events */
jQuery(document).on("imageResized", function (event) {
	//var data = new FormData(jQuery("form[id*='uploadImageForm']")[0]);
	console.log('imageResized');
	if (event.blob && event.url) {
		document.getElementById('upfile_1').files[0] = event.url;
		console.log(document.getElementById('upfile_1').files[0]);
		console.log(event.url);
	}
});

‘

(@alexsbecker)

Hace 1 año, 2 meses

Actualizar:
Obtuve la respuesta (clara) a mi primera pregunta (cómo agregar la función al evento de intercambio # upfile_1 porque no puedo averiguar cómo esperar hasta que se cargue # upfile_1). Todo lo que tenía que hacer era usar la función window.on (‘load’, function () {}) de jQuery, con algo de sabor adicional para manejar cuando el usuario selecciona un archivo y luego navega fuera de la página antes de seleccionar el mismo archivo :

jQuery(window).on('load', function() {
	/*resets the value to address the issue of navigating away from the page 
	and choosing to upload the same file */ 
	jQuery('#upfile_1').on('click touchstart' , function(){
		jQuery(this).val('');
	});

	//Trigger now when you have selected any file 
	jQuery("#upfile_1").change(function(e) {
		resizePhotos('upfile_1', 500)
	});
	
});

Ahora puedo hacer que se ejecute resizePhotos (), que luego activa el evento «imageResized». Eso ahora genera de manera confiable un dataURL redimensionado a la consola, y el único problema que tengo es este:

¿Cómo tomo el blob o dataurl y lo vuelvo a colocar en el formulario para cargarlo?

Hay una limitación adicional a este problema: no puedo usar el objeto DataTransfer porque no es compatible con iOS Safari, que es un distribuidor. No. document.getElementById('upfile_1').files[0] = event.url; n / A document.getElementById('upfile_1').files[0] = event.blob;
parece funcionar. Supongo que tengo que enviarlo a través de la aplicación ajax, pero tal vez conozcas una mejor manera.

¿Solucionó tu problema??

SíNo

0 / 0