0

Buen día estoy tratando de bajar el peso de una imagen en base 64 antes de subirla a la base de datos, mi código es el siguiente Html

    <label for="recipient-name" class="control-label">Cargar foto</label>
                        <div id="div_file">
                            <i class='fas fa-camera fa-md fal-xs' name="cam" id="cam"><label id="texto" class="control-label">
                                 Tomar Foto</label></i>
                            <input name="foto" id="foto" type="file" placeholder="TomarFoto" capture="camera" required onchange="getBaseUrl()">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ">
                        <div class="form-group marImg borde_d2 imgFondo">
                            <img id="img" height="150" class="marImg2">
                        </div>

el codigo con el que realizo el javaScrip es el siguiente

    function getBaseUrl() {
    var file = document.querySelector('input[type=file]')['files'][0];
    file.width = 200;
    file.height = 200;
    var reader = new FileReader();
    var baseString;
    reader.onloadend = function() {
        baseString = reader.result;
           document.getElementById("b64").innerHTML = baseString;
    }; 
    this.resizeBase64Img(linea, 100, 100).then(function(newImg) {
        document.getElementById("img").src = newImg;
    });

    reader.readAsDataURL(file);
    } 
function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width / this.width, height / this.height);
        context.drawImage(this, 0, 0);
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));
    });
    return deferred.promise();
}

El problema es que al trasformar el base 64 no se reduce el peso de la imagen

7
  • Al contrario amigo el formato base64 sera siempre mas pesado que el formato original, porque la codificacion de caracteres es mucho mas larga y pesada, pero creo que es algo de lo que no deberias preocuparte, porque al decodificar la imagen en el otro lado, esta quedara igual de liviana que antes de codificarla en base64, en pocas palabras, base64 te permite transportar informacion sin perdida de datos y de forma segura, pero tiene el inconveniente que la carga transmitida es mucho mas grande.
    – Layer
    el 8 jul. 2020 a las 19:53
  • si deseas de verdad bajar el peso de la imagen entonces si o si habra perdida de calidad en la imagen, la otra opcion es conservar la calidad pero reducir el tamaño de la imagen, que solo es viable hasta cierto punto.
    – Layer
    el 8 jul. 2020 a las 20:14
  • 2
    El formato GIF suele ser más pesado que JPG. Si quieres cambiar de formato, prueba canvas.toDataURL("image/jpeg", 0.75);, donde 0.75 es la calidad, puedes ajustarlo hasta que obtengas el resultado deseado.
    – Triby
    el 8 jul. 2020 a las 20:16
  • Lo que ha dicho Triby te debera funcionar perfecto, iba a mencionarlo antes pero ya lo menciono Triby
    – Layer
    el 8 jul. 2020 a las 21:11
  • Gracias triby con canvas funciono de maravilla
    – MRSDY SOTO
    el 4 sep. 2020 a las 15:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.