Redimensionar la imagen antes de subirla

Question

Necesito proporcionar un medio para que un usuario cargue fotos en su sitio web en formato jpeg. Sin embargo, las fotos son muy grandes en tamaño original, y me gustaría que la opción de redimensionar antes de cargar sea muy fácil para el usuario. Parece que mis únicas opciones son una aplicación del lado del cliente que cambia el tamaño de las fotos antes de subirlas a través de un servicio web, o un enlace de JavaScript del lado del cliente en la operación de carga que redimensiona las imágenes. La segunda opción es muy tentativa porque no tengo una biblioteca de cambio de tamaño de imagen JavaScript, y será difícil obtener el JavaScript para ejecutar mi herramienta de cambio de tamaño actual, ImageMagick.

Estoy seguro de que este no es un escenario muy raro, y se apreciarán algunas sugerencias o sugerencias para los sitios que hacen esto.

Answer 1

tiene varias opciones:

1. Java
2. ActiveX (sólo en Windows)
3. Silverlight
4. Flash
5. Flex
6. Google Gears (la versión más reciente es capaz de cambiar el tamaño y arrastre y suelte desde su escritorio)

Investigué mucho buscando una solución similar a la que describió y hay muchas soluciones que varían mucho en calidad y flexibilidad.

Mi sugerencia es encontrar una solución que hará el 80% de lo que necesita y personalizarlo para satisfacer sus necesidades.

Answer 2

Creo que necesita Java o ActiveX para eso. Por ejemplo Thin Image Upload

Answer 3

Desafortunadamente no podrá cambiar el tamaño de las imágenes en Javascript. Es posible en Silverlight 2 tho.

Si desea comprar algo ya hecho: Aurigma Image Uploader es bastante impresionante - $ USD250 para las versiones de ActiveX y Java. Hay algunas demos en el sitio, estoy bastante seguro de que Facebook usa el mismo control.

Answer 4

Lo que dicen jao y russau es cierto. La razón es que JavaScript no tiene acceso al sistema de archivos local debido a razones de seguridad. Si JavaScript pudiera "ver" sus archivos de imagen, podría ver cualquier archivo, y eso es peligroso.

Necesita un control de nivel de aplicación para poder hacer esto, y eso significa Flash, Java o Active-X.

Answer 5

Hay Plupload tool capaz de múltiples tecnologías que declara que puede hacer cambio de tamaño antes de la carga, pero aún no lo he probado. También encontré una respuesta adecuada en mi question about binary image handling javascript libs.

Answer 6

En 2011, podemos saber hacerlo con File API y canvas. Esto funciona por ahora solo en Firefox y Chrome. Aquí hay un ejemplo:

var file = YOUR_FILE, 
    fileType = file.type, 
    reader = new FileReader(); 

reader.onloadend = function() { 
    var image = new Image(); 
     image.src = reader.result; 

    image.onload = function() { 
    var maxWidth = 960, 
     maxHeight = 960, 
     imageWidth = image.width, 
     imageHeight = image.height; 

    if (imageWidth > imageHeight) { 
     if (imageWidth > maxWidth) { 
     imageHeight *= maxWidth/imageWidth; 
     imageWidth = maxWidth; 
     } 
    } 
    else { 
     if (imageHeight > maxHeight) { 
     imageWidth *= maxHeight/imageHeight; 
     imageHeight = maxHeight; 
     } 
    } 

    var canvas = document.createElement('canvas'); 
    canvas.width = imageWidth; 
    canvas.height = imageHeight; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight); 

    // The resized file ready for upload 
    var finalFile = canvas.toDataURL(fileType); 
    } 
} 

reader.readAsDataURL(file); 

Answer 7

Solución de JavaScript puro. Mi código cambia el tamaño de JPEG por interpolación bilineal, y no pierde exif.

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) { 
    var req = new XMLHttpRequest(); 
    req.open("POST", "/jpeg", false); 
    req.setRequestHeader('Content-Type', 'image/jpeg'); 
    req.send(data.buffer); 
} 

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    for (var i = 0, f; f = files[i]; i++){ 
     var reader = new FileReader(); 
     reader.onloadend = function(e){ 
      MinifyJpegAsync.minify(e.target.result, 1280, post); 
     }; 
     reader.readAsDataURL(f); 
    } 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false);