How do I display tiff image in browser when user is selecting an image.

See more:

ASP.NET

Javascript

TIFF

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 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;">