¿Cuál es la mejor y más rápida forma de cambiar el tamaño de las imágenes en el lado del cliente usando JavaScript?¿Cómo mostrar imágenes redimensionadas en una página web manteniendo la relación de aspecto?
EDITAR : Lo siento, me refiero a la mejor manera de pantalla una imagen recortada sobre el lado del cliente ..
Fácil.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Client-Side Image Resize (Why?!)</title>
<script type="text/javascript">
window.onload = function() {
var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
var img = new Image();
img.onload = function() {
var w = parseInt((this.width + "").replace(/px/i, ""), 10);
var h = parseInt((this.height + "").replace(/px/i, ""), 10);
// 50% scale
w = (w/2) + "px";
h = (h/2) + "px";
var htmlImg = document.createElement("img");
htmlImg.setAttribute("src", url);
htmlImg.setAttribute("width", w);
htmlImg.style.width = w;
htmlImg.setAttribute("height", h);
htmlImg.style.height = h;
document.body.appendChild(htmlImg);
}
img.src = url;
}
</script>
</head>
<body>
<h1>Look, I'm Resized!</h1>
</body>
</html>
haciendo peso y altura no significa cambiar el tamaño de la imagen. –
No estoy seguro de si realmente quiere decir cambiar el tamaño de la imagen o simplemente establecer el tamaño que la imagen se muestra en. Una es imposible, la otra sería establecer las propiedades de ancho y alto con jQuery.
Si tienes intención de hacerlo en un comunicado a continuación, la altura y la anchura de propiedades lo más probable es lo mejor.
Si quiere algo animado, puede usar el comando .animate(...) y establecer el alto y el ancho como parámetros. Eso debería hacer que la imagen cambie suavemente.
Las imágenes siempre se deben servir en el tamaño que se mostrarán. Es mejor tener varias copias en el servidor en lugar de copiar un archivo a través de la red e intentar manipularlo en el lado del cliente. Considere esto:
Redimensionar una la imagen no es simple cambio de altura/ancho. Cuando especifica un tamaño diferente (ya sea a través de estilos, secuencia de comandos, etc.) del tamaño de la imagen original, el navegador utilizará la API nativa (por ejemplo, el sorteo de win32) para reducir/agrandar la imagen correctamente. Recortar la imagen (perder partes de la imagen) es más fácil, pero rara vez se desea.
-1 para "siempre se debe servir". Reutilizar la misma imagen en diferentes tamaños puede ser útil para ahorrar ancho de banda. Además, cuando se permite a los usuarios importar imágenes (por ejemplo, en un foro) es posible que desee cambiar el tamaño. – Pool
Si no disuada flash, con flash10 Ahora usted tiene la opción de procesar los archivos cargados en el cliente antes de enviarlos al servidor. De modo que podría usar un objeto flash oculto/transparente/pequeño para permitir que el cliente cargue su imagen, cambiar el tamaño del flash de la imagen (tiene algunas apis buenas de manipulación de imágenes) y luego enviar los datos de bytes al servidor.
el as3 core lib tiene codificadores jpeg y png si desea codificar la imagen en cualquiera de los formatos antes de cargarla.
Si no tiene el flash siempre se puede descargar el Flex 3 (o 4) SDK y utilizar FlashDevelop hacerlo todo gratis =)
Cambio de tamaño antes de subir sería una herramienta muy poderosa. Esto reduciría el tiempo que lleva cargar imágenes a un servidor. A menudo, nuestros usuarios tienen imágenes de 5 megapíxeles recién salidos de sus cámaras y no tienen idea de cómo reducir el tamaño con un editor de imágenes. Lo que queremos cargar es una foto de 1500 píxeles de ancho, jpg o png comprimida a menos de 500Kbytes.
Este atuendo Thin File dice que puede hacerlo, pero aún no lo he comprobado. Esperaba encontrar una manera de usar JQuery para hacer lo mismo.
Flash 10 tiene soporte para cambiar el tamaño de imágenes en el lado del cliente:
http://www.shift8creative.com/projects/agile-uploader/index.html cambio de tamaño antes de la subida. Integración de JavaScript flexible y compacta, le permite utilizar cualquier idioma de fondo, una imagen rápida y de buena calidad.
Una demostración más bonito que la página principal que muestra la integración de JavaScript: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html
libre como la cerveza. Espero eso ayude.
¿Quizás desee una forma de minimizar el tráfico de red cuando el usuario desea cargar una imagen del cliente, primero cambiando el tamaño de la imagen para que sea más pequeña antes de enviarla al servicio? –
@Jeffrey: Sí, está en lo cierto. De lo contrario, cambie el tamaño del servidor antes de enviarlo por el cable. –
@mattt: varias personas ofrecieron soluciones para cambiar el tamaño de la imagen antes de subirla. ¿Es eso lo que estabas buscando? (El texto actual de la pregunta no está claro y la edición sería útil). –