0

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.

1 respuesta 1

0

Estuve revisando tu código, y lo que pude notar que no espera a que la imagen este cargada, por lo que al llegar a las medidas no tiene toda la información de la imagen, lo que le agregue es el evento onload de la imagen, para asegurar que este cargada antes de continuar con las medidas,

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("inputCustomBg").files[0]);
    oFReader.onload = function (oFREvent) {
        $("#customBgDiv").empty();
        var bgimage = new Image();
        bgimage.src = oFREvent.target.result;
        bgimage.onload = () => {
            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(img2);
        };
    };
}
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>
    <input type="file" id="inputCustomBg" onchange="PreviewImage()">
    <div id="customBgDiv" style="width: 200px; height: 200px; overflow: hidden; margin: 5px; border: 1px solid red;;">
    </div>
</body>

1
  • Muchas gracias!
    – minix88
    Commented el 9 oct. 2020 a las 14:33

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.