Plugin para thumbnails

Carlos Cesar Caballero Díaz

unread,

May 15, 2014, 8:31:32 AM5/15/14

to web2py-...@googlegroups.com

He subido a github una versión inicial de un plugin para crear de forma
automática miniaturas de imágenes (thumbnails), en
https://github.com/cccaballero/web2py-thumbnails están los fuentes y
algunas instrucciones.

Saludos.

--

Este mensaje le ha llegado mediante el servicio de correo electronico que ofrece Infomed para respaldar el cumplimiento de las misiones del Sistema Nacional de Salud. La persona que envia este correo asume el compromiso de usar el servicio a tales fines y cumplir con las regulaciones establecidas

Infomed: http://www.sld.cu/

isi_jca

unread,

Apr 4, 2020, 6:30:17 PM4/4/20

to web2py-usuarios

Carlos:

¿Es posible crear la miniatura antes de ser enviada al server?, Estoy haciendo unas pruebas con imágenes cuyo tamaño es de 4 MB y la verdad es muy lenta la carga. Cualquier ayuda será bienvenida.

Saludos cordiales.

Carlos Cesar Caballero

unread,

Apr 4, 2020, 8:20:11 PM4/4/20

to web2py-...@googlegroups.com

Es técnicamente posible generar un thumbnail del lado del cliente vía Javascript, pero debe ser incluso más lento que si lo hace el servidor, cuánto se está tardando la petición POST?

--
Has recibido este mensaje porque estás suscrito al grupo "web2py-usuarios" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a web2py-usuari...@googlegroups.com.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/web2py-usuarios/95566aa0-cbad-462b-8ae6-a65750b4845d%40googlegroups.com.

isi_jca

unread,

Apr 5, 2020, 1:41:06 PM4/5/20

to web2py-usuarios

Carlos:

Gracias por responder, en subir una imágen de 3 MB demora casi 30".

Saludos.

El sábado, 4 de abril de 2020, 21:20:11 (UTC-3), Carlos Cesar Caballero escribió:

Es técnicamente posible generar un thumbnail del lado del cliente vía Javascript, pero debe ser incluso más lento que si lo hace el servidor, cuánto se está tardando la petición POST?

El sáb., 4 de abril de 2020 6:30 p. m., isi_jca <juliocesa...@gmail.com> escribió:

Carlos:

¿Es posible crear la miniatura antes de ser enviada al server?, Estoy haciendo unas pruebas con imágenes cuyo tamaño es de 4 MB y la verdad es muy lenta la carga. Cualquier ayuda será bienvenida.

Saludos cordiales.

El jueves, 15 de mayo de 2014, 9:31:32 (UTC-3), Carlos Cesar Caballero Díaz escribió:
He subido a github una versión inicial de un plugin para crear de forma
automática miniaturas de imágenes (thumbnails), en
https://github.com/cccaballero/web2py-thumbnails están los fuentes y
algunas instrucciones.

Saludos.

--

Este mensaje le ha llegado mediante el servicio de correo electronico que ofrece Infomed para respaldar el cumplimiento de las misiones del Sistema Nacional de Salud. La persona que envia este correo asume el compromiso de usar el servicio a tales fines y cumplir con las regulaciones establecidas

Infomed: http://www.sld.cu/

--
Has recibido este mensaje porque estás suscrito al grupo "web2py-usuarios" de Grupos de Google.

Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a web2py-...@googlegroups.com.

isi_jca

unread,

Apr 21, 2020, 4:30:33 PM4/21/20

to web2py-usuarios

Estimados:

Finalmente logro obtener una miniatura del lado del cliente usando un objeto canvas, pero tuvo que interceptar el evento submit del formulario para evitar que el formulario envié las imágenes originales, yo quiero subir las miniaturas y las estoy enviando mediante un llamado ajax, el problema que tengo es que al preguntar en el controlador if form.process().accepted: , siempre devuelve false. Transcribo el código que estoy usando. ¿cual o cuales pueden ser los problemas?

{{extend 'layout.html'}}
<head>
    <style>
        .draw_class{display: none;} /* Oculta las canvas */
         img{
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 0px;
          /*width: 250px;
          height:1px;*/
         }
     </style>

</head>
<head>
<meta charset='UTF-8'>
</head>

<h4>Documentación para su Trámite</h4>
<hr>

<div class="alert alert-info">
<h4>
      <p><strong>{{=nombre}} {{=apellido}} </strong> - DNI: <strong>{{=fSetNumberFormat(nrodoc)}} </strong> </p>
      <p>Solicitud: {{=ls_presentacion}}</p>

</h4>
</div>
<br>

<div class="container alert bg-info">
<p>A continuación cargue la siguiente documentación OBLIGATORIA:</p>
<div class='container'>
{{=form}}
</div>

</div>
<br>
</div>

<script>

function draw(index,url,event){
    //Envia una imagen al servidor usando XMLHttpRequest
    index = index.toString();
    var drawing = document.getElementById("canvas"+index);
    var con = drawing.getContext("2d");
    var picture = document.getElementById("loadfoto"+index);
    var labelresult = document.getElementById("idmessage"+index);
    var imagenAR = document.getElementById("foto"+index);
    var iddocumento = document.getElementById("iddocumento"+index).value;
    var idpresentacion = document.getElementById("idpresentacion"+index).value;
    var ls_filename = imagenAR.value
    var extension = ls_filename.substr(ls_filename.lastIndexOf('.') + 1);
    var ls_filetype = '';
    labelresult.innerHTML = '';

    if (imagenAR.files.length == 0)
    {
     //labelresult.innerHTML = 'Debe cargar una archivo';
     console.log('Debe cargar un archivo, draw file.length ',imagenAR.files.length)
     return
    }
    if (extension.toUpperCase() != 'PDF')
    { con.drawImage(picture, 0, 0,1125,2000);
       var dataURL = drawing.toDataURL('image/jpeg',0.50); //mediumQuality
       ls_filetype = 'img_data';
    }
    if (extension.toUpperCase() == 'PDF')
    {
      var dataURL = document.getElementById("foto"+index).files[0];
      ls_filetype = 'pdf_data';
    }
      var fd = new FormData();
          var file_name='anonimo.jpg'
          fd.append('filetype', ls_filetype);
          fd.append('filename', ls_filename);
          fd.append('idpresentacion', idpresentacion);
          fd.append('iddocumento', iddocumento);
          fd.append('fileURL', dataURL);

         const result = $.ajax({
            url: url,
            data: fd,
            processData: false,
            contentType: false,
            type:'POST',
            success: function(result,status,xhr){
                var labelresult = document.getElementById("idmessage"+index);
                var imagenAr = document.getElementById("foto"+index);
                var picture = document.getElementById("loadfoto"+index);
                    labelresult.innerHTML = 'Procesado, espere';
                    labelresult.style.color = "#27AE60";
                    imagenAr.value = '';
                    picture.src = '';
                    picture.width=0;
                    picture.height=0;
                  },
             error: function(data) {
                var labelresult = document.getElementById("idmessage"+index);
                var imagenAr = document.getElementById("foto"+index);
                var picture = document.getElementById("loadfoto"+index);
                    labelresult.innerHTML = 'Envio fallido '+JSON.stringify(data);
                    labelresult.style.color = "#C0392B";
                    imagenAr.value = '';
                    imagenAr.src = '';
                    picture.src = '';
                    picture.width=0;
                    picture.height=0;
                    console.log(JSON.stringify(data));} /*,
             complete:function()
                    {
                      contador = contador + 1;
                       // window.location.href = link;

                    }*/
          }).responseText;
    event.preventDefault();
return }; // end draw
</script>

<script>
//Envia las imágenes al servidor, Para ello intercepta el evento submit del botón.
$("#MyForm").submit( function( event ){
    var images, index, idturno;
        $("#idsubmit").attr("disabled",true);
        $("#idsubmit").attr("class", "btn btn-lg btn-primary");
         $("#idsubmit").val("Trabajando...");
        //images = document.getElementsByClassName('loadfoto');
        images = $(".loadfoto");
        idturno = $("#idpresentacion0").val();

    //"https://www.huairasoft.com.ar/SRMSE/TestThumb/thumbnail_from_client"
        for (index = 0; index < images.length; ++index) {
            try {
                  await draw(index,"{{=URL('TestThumb','thumbnail_from_client')}}",event); // Función que envia las imágenes
                }
            catch (error)
                {
                console.error(error);
                }

          };

        $("#idsubmit").attr("disabled",false);
        $("#idsubmit").attr("class", "btn-primary");
         $("#idsubmit").val("Enviar");
         var link = "/SRMSE/persona3/presenta_documentos?id="+idturno.toString();
         //window.location.href = link;

return false;
});

//Permite ver la imagen que se cargo al hacer fileload
function leerarchivobin(id_imagen, miimagen) {
    //console.log('id_imagen',id_imagen,'miimagen',miimagen)
    var imagenAR = document.getElementById(id_imagen);
    var ls_filename = imagenAR.value
    var extension = ls_filename.substr(ls_filename.lastIndexOf('.') + 1);
    var img = document.getElementById(miimagen);
    extension = extension.toUpperCase()
if (imagenAR.files.length != 0 && imagenAR.files[0].type.match(/image.*/)) {
     var lecimg = new FileReader();
      lecimg.onload = function(e) {

         img.src = e.target.result;
         var myImg = document.querySelector("#"+miimagen);
         img.width=198;
         img.height=350;
     }
     lecimg.onerror = function(e) {
         alert("Error leyendo la imagen!!");
     }
     lecimg.readAsDataURL(imagenAR.files[0]);
}
if (extension == 'PDF')
{
      img.src = '../static/images/pdf.png';
      img.width=40;
      img.height=40;

}
else {
       var img = document.getElementById(miimagen);
         img.src = "";
}
};
</script>

Saludos cordiales.

Reply all

Reply to author

Forward