Redimensiona imagen con js

[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.