How do I encode tiff image on client side using javascript

Question

I have this code (please see below), when the user is selecting an image i'd like to display a preview of the image. It works well for standard formats but since tiff is not supported by some of the browser it will show a broken image if user is selecting a tiff image. I have no problem converting/encoding the image when i'm getting it from the server my issue is on the client side.

The relevant javascript:

$(function () {
$(document).on('change', '#ImageData', function (evt) {
    try {
        var file = evt.target.files[0] || evt.srcElement.files[0]; // Read  the first file from the list.
    }
    catch (e) {
        // Something went wrong or no file was chosen - 
        // remove current image and return.
        removeImg();
        return;
    }

    if (isImage(file)) { // Add only valid images
        var reader = new FileReader();
        reader.onloadend = (function () {
            return function (event) {
                var img = document.getElementById('img-id');
                img.src = event.target.result;
            };
        })(file);
        reader.readAsDataURL(file); // Read in the image file as a data URL.
    }
    else {
        removeImg(); // If there is already image remove it
    }
});
});


The relevant html:
@Html.ValidationMessageFor(model => model.imageFile, "", new { @class = "text-danger" })
@Html.TextBoxFor(model => model.imageFile, new { type = "file", name ="imageFile", id = "ImageData" })
<img id='img-id' style="height: 300px; width: auto;">