Comunidad de diseño web y desarrollo en internet online

Subir imagen redimensionandola des de el lado del cliente

Citar            
MensajeEscrito el 18 Jul 2016 06:14 pm
Hola buenas, tengo un problemilla como no... :roll:

Quiero subir una imagen al servidor pero re-dimensionandola de tamaño desde el cliente (para que pese menos y sea mas rapida la subida).

Hasta ahora lo he estado haciendo con "plupload" que cumple con su cometido pero es muy complicado y tiene demasiadas cosas que no utilizo. Y a la hora de automatizarlo con un formulario que se llena al mismo momento de subir la imagen me da problemas...
Plupload por si no lo conocéis funciona con un javascript (para re-dimensionar) y un .php (para subirla). No se si habrá algo parecido pero mas basico. Solo re-dimensionar y subir una sola imagen.

Quiero algo sencillo y que sea capaz de entender el codigo entero para modificarlo y adaptarlo

Gracias

Por circunsxik

32 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Jul 2016 09:38 am
Hola,
mira este código JQuery a ver si te vale:

Código PHP :

jQuery(document).ready(function(){
jQuery('.content img.imagefield').each(function(){
var width = jQuery(this).width();
var new_width = 680; //nuevo tamaño
if (width > new_width){
var height = jQuery(this).height();
var calculo = Math.round((100*new_width)/ width); //porcentaje
var new_height = Math.round((height*calculo)/100);
jQuery(this).css( {
width : new_width+'px',
height : new_height+'px'
} );
}
});
});


Un saludo,
David
diseño grafico madrid

Por conectart

Claber

128 de clabLevel



 

ceo

chrome
Citar            
MensajeEscrito el 25 Jul 2016 06:16 pm

conectart escribió:

Hola,
mira este código JQuery a ver si te vale:

Código PHP :

jQuery(document).ready(function(){
jQuery('.content img.imagefield').each(function(){
var width = jQuery(this).width();
var new_width = 680; //nuevo tamaño
if (width > new_width){
var height = jQuery(this).height();
var calculo = Math.round((100*new_width)/ width); //porcentaje
var new_height = Math.round((height*calculo)/100);
jQuery(this).css( {
width : new_width+'px',
height : new_height+'px'
} );
}
});
});


Un saludo,
David
diseño grafico madrid


Hola conectart, me estoy mirando tu código pero no se como aplicarlo.
Podrías ponerme un ejemplo?
Y si me puedes explicar lo que hace.
Muchas gracias y perdona las molestias

Por circunsxik

32 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jul 2016 10:09 am
para las imágenes que sean de la clase .content, las redimensiona. Es lo que hace este script.
Un saludo
David

Por conectart

Claber

128 de clabLevel



 

ceo

chrome
Citar            
MensajeEscrito el 26 Jul 2016 10:24 am

conectart escribió:

para las imágenes que sean de la clase .content, las redimensiona. Es lo que hace este script.
Un saludo
David


Y como hago que la imagen sea de clase .content? Yo tengo un formulario con un campo file y des de alli inserto la imagen, como se puede hacer que una vez insertada sea de clase .content?

Por circunsxik

32 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.