Convert PNG to JPEG

by Blueprinter

HTML

<form class='frmUpload'>
    <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])">
</form>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>

JavaScript

window.picUpload = function (frmData) {
    //console.log("picUpload ran: " + frmData);
alert('pic upload ran');
    
    var cnvs = document.getElementById("cnvsForFormat");
    var ctx = cnvs.getContext("2d");
    cnvs.style.border = "1px solid #c3c3c3";    
    var img = new Image;
    img.src = URL.createObjectURL(frmData);
        img.onload = function () {
        var picWidth = this.width;
        var picHeight = this.height;
        var wdthHghtRatio = picHeight / picWidth;
        if (Number(picWidth) > 400) {
            var newHeight = Math.round(Number(400) * wdthHghtRatio);
        } else {
            return false;
        };
        document.getElementById('cnvsForFormat').height = newHeight;
        //Must change the width and height settings in order to decrease the image size, but
        //it needs to be proportional to the original dimensions.
        ctx.drawImage(img, 0, 0, 400, newHeight);
     };
};