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
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 enbase64
, 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.canvas.toDataURL("image/jpeg", 0.75);
, donde 0.75 es la calidad, puedes ajustarlo hasta que obtengas el resultado deseado.Triby
te debera funcionar perfecto, iba a mencionarlo antes pero ya lo mencionoTriby