javascript - type - validar tamaño imagen laravel

Redimensionar la imagen del lado del cliente con JavaScript antes de subirlo al servidor

Question

Me gustaría saber si es técnicamente posible cambiar el tamaño de una imagen en el lado del cliente con JavaScript (realmente cambiar el tamaño, no solo cambiar el ancho y la altura). Sé que es posible hacerlo en Flash, pero me gustaría evitarlo si es posible. ¿Hay algún algoritmo de código abierto en algún lugar de la web?

Answer 1

Aquí hay una esencia que hace esto: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(una versión es6 y una versión .js que se pueden incluir en una etiqueta de script)

Puedes usarlo de la siguiente manera:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById(''select'').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as ''blob'')
        document.getElementById(''preview'').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

Incluye un montón de detección de soporte y polyfills para garantizar que funcione en tantos navegadores como pueda.

(también ignora las imágenes gif, en caso de que estén animadas)

Answer 2

La respuesta es sí: en HTML 5 puede cambiar el tamaño de las imágenes del lado del cliente utilizando el elemento canvas. También puede tomar los datos nuevos y enviarlos a un servidor. Ver este tutorial:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

Answer 3

Sí, con los navegadores modernos esto es totalmente factible. Incluso es factible hasta el punto de cargar el archivo específicamente como un archivo binario que haya realizado cualquier cantidad de alteraciones en el lienzo.

http://jsfiddle.net/bo40drmv/

(Esta respuesta es una mejora de la respuesta aceptada here )

Teniendo en cuenta el proceso de captura, la presentación de resultados en PHP tiene algo similar a:

//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it''s temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);

Si uno se preocupa por el punto de Vitaly, puede probar algunos de los recortes y el cambio de tamaño en el jfiddle de trabajo.

Answer 4

Si estaba redimensionando antes de subir, acabo de enterarme de este http://www.plupload.com/

Hace toda la magia para ti en cualquier método imaginable.

Lamentablemente, el cambio de tamaño de HTML5 solo es compatible con el navegador Mozilla, pero puede redireccionar otros navegadores a Flash y Silverlight.

¡Lo probé y funcionó con mi Android!

Estaba usando http://swfupload.org/ en flash, hace el trabajo muy bien, pero el tamaño de tamaño es muy pequeño. (no puedo recordar el límite) y no vuelve a html4 cuando el flash no está disponible.

Answer 5

Tal vez con la etiqueta canvas (aunque no es portátil). Hay un blog sobre cómo rotar una imagen con lienzo here , supongo que si puedes rotarlo, puedes redimensionarlo. Tal vez puede ser un punto de partida.

Ver there también.

Answer 6

http://nodeca.github.io/pica/demo/

En el navegador moderno puede usar lienzo para cargar / guardar datos de imágenes. Pero debe tener en cuenta varias cosas si cambia el tamaño de la imagen en el cliente:

1. Tendrás solo 8bits por canal (jpeg puede tener un mejor rango dinámico, alrededor de 12 bits). Si no cargas fotos profesionales, eso no debería ser un problema.
2. Tenga cuidado con el algoritmo de cambio de tamaño. La mayoría de los ajustadores del lado del cliente utilizan matemática trivial, y el resultado es peor de lo que podría ser.
3. Es posible que necesite mejorar la imagen reducida.
4. Si desea reutilizar los metadatos (exif y otros) del original, no se olvide de quitar la información del perfil de color. Porque se aplica cuando cargas imágenes al lienzo.