Estoy intentando extraer una imagen con FileReader, si es mayor a aspecto 16:9 reducirle el tamaño a 1920 x 1080. Cree una variable llamada bgimage que contiene el base 64 sin embargo al pasarla al canvas sale transparente.
Soy relativamente nuevo en esto de canvas y filereader y no he encontrado solución por ningún lado.
Mi código es el siguiente:
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("inputCustomBg").files[0]);
oFReader.onload = function (oFREvent) {
var bgimage = new Image();
bgimage.src = oFREvent.target.result;
var tempW = bgimage.width;
var tempH = bgimage.height;
var canvas = document.createElement('canvas');
canvas.width = 1920;
canvas.height = 1080;
if (tempW > 1920) {
tempW = 1920;
} else {
tempW = bgimage.width;
}
if (tempH > 1080) {
tempH = 1080;
} else {
tempH = bgimage.height;
}
var ctx = canvas.getContext("2d");
ctx.drawImage(bgimage, 0, 0, tempW, tempH);
var img2 = new Image();
img2.src = canvas.toDataURL();
$("#customBgDiv").append("<img src='" + img2.src + "'>");
};
}
De antemano muchas gracias por la ayuda.