Redimensiona imagen con js

[cesand209]

Hola compañeros, esa es mi consulta y lo que necesito hacer... alguna libreria o funcion js para reducir el peso de imagenes antes de hacer el upload de la misma con php. Es posible esto con alguna libreria?

Tengo un form donde los usuarios pueden subir 5 imagenes y claro si queren sobir todas y cada una minimamente pesa 3 o 4mb surge el problema de carga, tiempo de espera etc
..

Que me recomiendan ? Saludos.

[mpozo]

Si has trabajado con [URL="https://www.google.es/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=resize+image+javascript+before+upload"]canvas[/URL] no tendrás problemas en hacerlo

[cesand209]

mpozo te agradezco tu aporte.

encontre esto a base a lo que me dijiste

https://github.com/mgkimsal/jsclientshrinker

se ve simple pero no lobro adaptarlo, no quiero lograr esa vista previa y demas detaller que muestra el ejemplo de ese codigo.

por medio de una fujncion js valido un formular y que que me reduzca la imagen de un input file que se llama userfile

asi modifique esas dos funciones js del proyecto

Código Javascript:

function _resize(img, maxWidth=200, maxHeight=200) 
{
        var ratio = 1;
 
    var canvas = document.createElement("canvas");
    canvas.style.display="none";
    document.body.appendChild(canvas);
 
    var canvasCopy = document.createElement("canvas");
    canvasCopy.style.display="none";
    document.body.appendChild(canvasCopy);
 
    var ctx = canvas.getContext("2d");
    var copyContext = canvasCopy.getContext("2d");
 
        if(img.width > maxWidth)
                ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
                ratio = maxHeight / img.height;
 
        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
/*try {
        copyContext.drawImage(img, 0, 0);
} catch (e) { 
    document.getElementById('loader').style.display="none";
    return false;
}*/
 
        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        // the line to change
        //ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
        // the method signature you are using is for slicing
        ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);
 
        var dataURL = canvas.toDataURL("image/png");
 
    document.body.removeChild(canvas);
    document.body.removeChild(canvasCopy);
        return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
 
 
};
 
function resize() { 
    var photo = document.getElementById("userfile");
 
 
    if(photo.files!=undefined){ 
 
        var loader = document.getElementById("loader");
        loader.style.display = "inline";
 
        var file  = photo.files[0];
        document.getElementById("orig").value = file.fileSize;
        var preview = document.getElementById("preview");
        var r = new FileReader();
        r.onload = (function(previewImage) { 
            return function(e) { 
                var maxx = document.getElementById('maxx').value;
                var maxy = document.getElementById('maxy').value;
                previewImage.src = e.target.result; 
                previewImage.onload = function() {
                    var k = _resize(previewImage, maxx, maxy);
                    if (k != false) { 
                        document.getElementById('base64').value= k;
                        document.getElementById('upload').submit();
                    } else {
                        alert('problem - please attempt to upload again');
                    }
                }
            }; 
        })(preview);
        r.readAsDataURL(file);
    } else {
        alert("Seems your browser doesn't support resizing");
    }
    return false;
}
 

y con esa codificacion lo que hago en mi js es llamar a la funcion

Código Javascript:

resize()
 

procesa todo perfecto pero jno hace la reduccion de la img

desde ya muchas gracias.