当用户选择图像时，如何在浏览器中显示tiff图像。 [英] How do I display tiff image in browser when user is selecting an image.

问题描述

当用户选择图像时，我有此代码（请参见下文）

我想显示图像的预览。它适用于标准格式

但是由于某些浏览器不支持tiff，如果用户选择一个tiff图像，它将显示一个损坏的图像。当我从服务器上获取

时我没有问题转换图像我的问题是在客户端。



相关javascript：

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

推荐答案

（function（）{

(function () {

（document）.on（' 更改'，' #ImageData'，函数（evt）{
尝试 {
var file = evt.target.files [ 0 ] || evt.srcElement.files [ 0 ]; // 从列表中读取第一个文件。
}
catch （e）{
// 出了问题或没有选择文件 -
// 删除当前图片并返回。
removeImg（）;
return ;
}

if （isImage（file））{ // 仅添加有效图像
var reader = 新 FileReader（）;
reader.onloadend =（function（）{
return function（ event ） {
var img = document.getElementById（' img-id'）;
img.src = event .target.result;
};
} ）（文件）;
reader.readAsDataURL（file）; // 将图片文件作为数据网址读取。
}
< span class =code-keyword> else {
removeImg（）; // 如果已经删除了图片
}
}）;
}）;

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

您无法在浏览器上显示tiff图像，因为它不是浏览器的可渲染图像格式。



更好的是你可以将tiff图像的流转换为base64字符串然后将其放入img标签src属性。

You can't show the tiff image on browser, because it is not render-able image format for browser.

Better you can convert the tiff image's stream into base64 string then put it into img tag's src attribute.

这篇关于当用户选择图像时，如何在浏览器中显示tiff图像。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！