none
Redimensionar Imagen antes de subir, (Lado Cliente) RRS feed

  • Pregunta

  • Hola estimados, una consulta que estoy medio perdido y quisiera clarificar el panorama para ver si puedo hacer esto o no.

    Tengo una web en ASP MVC 5 CSHTML, esta la utilizo para hacer un upload de imágenes de un trabajo de digitalizaciones que se hacen remotamente por esta web. Cuando se captura la imagen en el controller de la pagina del "lado del server" puedo re dimensionara y grabarla sin problemas pero para el usuario que esta subiendo las imágenes del "lado cliente" las sube como las toma el dispositivo de captura, celular o escaner, esto hace que el request al server sea mayor por lo tanto mas lento el Upload ya que las imágenes a veces vienen con una calidad alta que no tiene sentido ya que al capturarla en el "lado server" la re dimensiono y pierde esta calidad.

    Pregunta: Existe alguna forma me imagino que con JavaScript de capturar del <Input> la imagen seleccionada o capturada con el celular(capture="camera") y re dimensionara del "lado cliente" antes de hacer el método POST para enviarla al servidor y procesar su grabado es decir enviarla ya re dimensionada para así agilizar el upload??

    Cualquier link y/o ayuda es bienvenida... Espero haberlo explicado bien. Gracias...

    jueves, 1 de noviembre de 2018 13:27

Respuestas

  • Bueno, al final después de investigar, logré encontrar una solución confiable y que funciona bastante bien, la comparto por si alguno necesita algo parecido...

    basicamente tengo un input para capturar el archivo o la imagen tomada desde la cámara:

        <input  name="Image" type="file" accept="image/*" capture="camera" onchange="resize(this)" />
                        

    Luego tengo un Script que re dimensiona la imagen seleccionada o la capturada:

      function resize(itemfile) {
    
            var element = itemfile; 
            ImageTools.resize(element.files[0], {
                width: 1920,
                height: 1080
            }, function (blob, didItResize) {
                var file = new File([blob], (ListadeImagenes.length + 1) + ".jpg");
                ListadeImagenes.push(file);
              });
        };

    Para hacer la re dimensión utilizo una librería que adjunto el link, se puede usar cualquiera disponible: ImageTools

    al re dimensionar la imagen va agregando en una variable publica el archivo re dimensionado:

    var ListadeImagenes=[];

    Y luego un botón para enviar las imágenes re dimensionadas con su script:

                       <input type="button" onclick="sendresize()" value="Crear" class="btn btn-primary btn-lg" />
        
     function sendresize () {
    
                var fd = new FormData();
                var ins = ListadeImagenes.length;
                for (var x = 0; x < ins; x++) {
                    fd.append("imgUpload", ListadeImagenes[x]);
                }
                $.ajax({
                    url: '/Imagen_HC/_Create?nhc=' + @nhc,
                    method: 'post',                
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        console.log(response);
                        location.reload();
    
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });  
        };

    Para tomar las imágenes desde el controlador:

           public ActionResult _Create(int? nhc, List<HttpPostedFileBase> imgUpload)
     

    donde imgUpload es la lista de imágenes re dimensionadas.

    Con esto lo que logro es que del LADO CLIENTE, el método POST envía un paquete mas pequeño ya que re dimensiono las imágenes antes de subirlas al SERVIDOR logrando así optimizar el tiempo de UPLOAD de cada dispositivo vinculado a este trabajo...

    Espero que a alguien mas le sirva. Saludos.-

    • Marcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:48
    • Desmarcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:49
    • Marcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:49
    lunes, 12 de noviembre de 2018 23:48

Todas las respuestas

  • hola

    no evaluaste ningun libreria jquery que pudiera redimensionar la imagen?

    veo que existen librerias para validar desde el cliente

    jQuery Plugin To Check Image Resolution Before Uploading - checkImageSize.js

    pero no se si haya para redimensionar antes de hacer el upload

    la imagen la tienes dentro de un canvas ?

    HTML5 Canvas Image Size Tutorial

    sino siempre se puede evaluar bajar la resolucion de la camara cuando se captura

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 1 de noviembre de 2018 13:57
  • Estimado Leandro, gracias por responder...

    no evaluaste ningun libreria jquery que pudiera redimensionar la imagen?

    Si, por aquí voy, eso estoy buscando, conoces alguna confiable?

    veo que existen librerias para validar desde el cliente

    sino siempre se puede evaluar bajar la resolucion de la camara cuando se captura

    Lo que pasa es que es un trabajo de ciento de miles de digitalizaciones y el requerimiento de la imagen es fullhd 1920*1080 y hay celulares que solo pueden configurarse a no menos de 6mpx por lo que vuelvo a lo mismo...

    Gracias...

    jueves, 1 de noviembre de 2018 14:34
  • Bueno, al final después de investigar, logré encontrar una solución confiable y que funciona bastante bien, la comparto por si alguno necesita algo parecido...

    basicamente tengo un input para capturar el archivo o la imagen tomada desde la cámara:

        <input  name="Image" type="file" accept="image/*" capture="camera" onchange="resize(this)" />
                        

    Luego tengo un Script que re dimensiona la imagen seleccionada o la capturada:

      function resize(itemfile) {
    
            var element = itemfile; 
            ImageTools.resize(element.files[0], {
                width: 1920,
                height: 1080
            }, function (blob, didItResize) {
                var file = new File([blob], (ListadeImagenes.length + 1) + ".jpg");
                ListadeImagenes.push(file);
              });
        };

    Para hacer la re dimensión utilizo una librería que adjunto el link, se puede usar cualquiera disponible: ImageTools

    al re dimensionar la imagen va agregando en una variable publica el archivo re dimensionado:

    var ListadeImagenes=[];

    Y luego un botón para enviar las imágenes re dimensionadas con su script:

                       <input type="button" onclick="sendresize()" value="Crear" class="btn btn-primary btn-lg" />
        
     function sendresize () {
    
                var fd = new FormData();
                var ins = ListadeImagenes.length;
                for (var x = 0; x < ins; x++) {
                    fd.append("imgUpload", ListadeImagenes[x]);
                }
                $.ajax({
                    url: '/Imagen_HC/_Create?nhc=' + @nhc,
                    method: 'post',                
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        console.log(response);
                        location.reload();
    
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });  
        };

    Para tomar las imágenes desde el controlador:

           public ActionResult _Create(int? nhc, List<HttpPostedFileBase> imgUpload)
     

    donde imgUpload es la lista de imágenes re dimensionadas.

    Con esto lo que logro es que del LADO CLIENTE, el método POST envía un paquete mas pequeño ya que re dimensiono las imágenes antes de subirlas al SERVIDOR logrando así optimizar el tiempo de UPLOAD de cada dispositivo vinculado a este trabajo...

    Espero que a alguien mas le sirva. Saludos.-

    • Marcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:48
    • Desmarcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:49
    • Marcado como respuesta Ramiro Ledesma lunes, 12 de noviembre de 2018 23:49
    lunes, 12 de noviembre de 2018 23:48