¿Alguien sabe de algún script gratuito que comprima archivos JPG, GIF y PNG tanto como sea posible?Comprimir imágenes en el lado del cliente antes de cargar
Respuesta
Es posible que pueda cambiar el tamaño de la imagen con canvas
y exportarla utilizando dataURI. No estoy seguro acerca de la compresión, sin embargo.
Tome un vistazo a esto: Resizing an image in an HTML5 canvas
leí sobre un experimento aquí: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html
La teoría es que se puede utilizar tela para cambiar el tamaño de las imágenes en el cliente antes de cargar. El prototipo de ejemplo parece funcionar solo en navegadores recientes, aunque es una idea interesante ...
Sin embargo, no estoy seguro acerca de usar lienzo para comprimir imágenes, pero ciertamente puede cambiar su tamaño.
acabo desarrollaron una librería javascript llamada JIC para resolver ese problema. ¡Te permite comprimir jpg y png en el lado del cliente al 100% con javascript y no se requieren bibliotecas externas!
Puede probar la demo aquí: http://makeitsolutions.com/labs/jic y obtener las fuentes aquí: https://github.com/brunobar79/J-I-C
espero que les guste.
¿No hay forma de descomprimirlo? – RWendi
Debería poder descomprimirlo simplemente cambiando el tamaño de la imagen para que sea más grande. Puede que necesite descargar más memoria RAM para hacer esto. – Dan
@ brunobar79 ¿Puede esto exportar la imagen a una Blob de JavaScript, para que podamos subirla sin el uso de PHP? –
Llego tarde a la fiesta, pero esta solución funcionó bastante bien para mí. Sobre la base de this library, puede utilizar una función lik este - ajuste de la imagen, calidad, ancho máximo, y el formato de salida (jepg, png):
function compress(source_img_obj, quality, maxWidth, output_format){
var mime_type = "image/jpeg";
if(typeof output_format !== "undefined" && output_format=="png"){
mime_type = "image/png";
}
maxWidth = maxWidth || 1000;
var natW = source_img_obj.naturalWidth;
var natH = source_img_obj.naturalHeight;
var ratio = natH/natW;
if (natW > maxWidth) {
natW = maxWidth;
natH = ratio * maxWidth;
}
var cvs = document.createElement('canvas');
cvs.width = natW;
cvs.height = natH;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
var newImageData = cvs.toDataURL(mime_type, quality/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
}
Si está buscando una biblioteca para llevar a cabo cliente- compresión de imagen lateral, puede verificar esto: compress.js. Esto básicamente lo ayudará a comprimir múltiples imágenes puramente con JavaScript y convertirlas a la cadena base64. Opcionalmente, puede establecer el tamaño máximo en MB y también la calidad de imagen preferida.
- 1. ¿Visualizas la imagen seleccionada del sistema de archivos en el lado del cliente antes de cargar?
- 2. procesamiento de imágenes en el lado del cliente
- 3. Imagen de recorte de Javascript del lado del cliente
- 4. marco del lado del cliente ASP.NET Ajax no pudo cargar
- 5. ¿Es posible detectar imágenes gif animadas del lado del cliente?
- 6. Cómo cargar imágenes de 32 bits en el mapa de puntos del lado del servidor
- 7. Método del lado del servidor y del lado del cliente
- 8. Web Charting, lado del servidor o del lado del cliente?
- 9. Registradores en el lado del cliente GWT
- 10. Sesiones del lado del cliente
- 11. Idiomas del lado del cliente
- 12. caché de archivos del lado del cliente
- 13. Deshabilitar el almacenamiento en caché del lado del cliente
- 14. Lenguajes del lado del cliente fuertemente tipados?
- 15. Obtener el tamaño del archivo de carga antes de cargar
- 16. Caché del lado del cliente en GWT
- 17. lado del servidor MVC + lado del cliente MVC
- 18. Ruby: del lado del cliente o del lado del servidor?
- 19. Comprobación entre exploradores del tamaño del archivo en el lado del cliente antes de cargarlo en el servidor?
- 20. Validación del lado del cliente de FluentValidation
- 21. ASP.NET El marco del lado del cliente Ajax no pudo cargar .net 4.0
- 22. Socket.io en Heroku: código del lado del cliente
- 23. Validación del lado del cliente de Grails
- 24. Caché de imagen del lado del cliente con ASP.Net
- 25. opciones para el lado del cliente de extracción de archivos zip antes de subir
- 26. MVC3 CompareAttribute, error del lado del cliente
- 27. Ejecución del script Hook en el lado del cliente
- 28. Paginación: ¿lado del servidor o lado del cliente?
- 29. DDD y validación del lado del cliente
- 30. Cookies solo del lado del cliente
Los tres de estos son formatos ya comprimidos. La compresión adicional de las imágenes existentes provocaría una pérdida de calidad. – Charles
¿qué dice usted acerca de este "smushit.com" – xtremist
@Charles no necesariamente, la mayoría de la gente es lenta para poder comprimir sus imágenes. Por lo tanto, la compresión sin pérdidas probablemente disminuiría en gran medida el tamaño de la mayoría de las imágenes. –