javascript - IE 9/10/11 在某个未知阈值后不渲染图像

Question

我正在构建一个从 SharePoint 2013 或 SharePoint 2010 中提取文件以在 HTML 中查看的应用程序。在 C# 中，文件从 SharePoint 中提取(多页文档，如 Word、Excel、PDF、TIFF 等)，然后输入到各种第 3 方软件(DataLogics 和 Aspose)中，这些软件将文档分解为单独的页面，然后流式传输以 PNG 格式传输到浏览器的各个页面。

因此，在 HTML 中，我们有一个 img 元素，其 src 设置为 ASHX 服务中的特定 URL。 ASHX 服务从 SharePoint 中获取文件，并根据查询字符串参数，以流的形式返回所需的页面。

以下是我们如何反击:

[WebService(Namespace = "url")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class FileTransfer : IHttpHandler, IReadOnlySessionState
{
    public void ProcessRequest(HttpContext context)
        var stream = GetStream(context.Request);
        int chunkSize = 2097152; //2MB
        byte[] chunk = new byte[chunkSize];
        int bytesRead = 0;

        do {
            bytesRead = stream.Read(chunk, 0, chunkSize);
            HttpContext.Current.Response.OutputStream.Write(chunk, 0, bytesRead);
        }
        while (bytesRead > 0);
}

当我们分解的文件直接来自 SharePoint 时，这在任何浏览器中都 100% 完美运行。

我们还提供了用户可以上传文档的功能。这就是问题所在。上传的文档不会保存在 SharePoint 中。相反，它们的数据存储在 SessionState 中，直到用户选择保存。文件上传到 ASMX 服务，然后浏览器通过上述 ASHX 请求各个页面。

文件在 ASMX 服务中上传如下:

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
Public object Upload()
{
    var request = HttpContext.Current.Request;
    if (request.Files.Count == 1)
    {
        var uniqueId = request["uniqueId"];
        var file = request.Files[0];

        using (var memoryStream = new MemoryStream())
        {
            file.InputStream.CopyTo(memoryStream);
            docInfo = UploadItem(uniqueId, pageNum, memoryStream.ToArray());
        }
    }
}

UploadItem 将 uniqueId 和 byte[] 添加到 SessionState。

文件是这样从 javascript 发送的(FileUpload 与 type=file 输入的更改事件绑定(bind)):

this.FileUpload = function (files) {
    var upload = new XMLHttpRequest();
    upload.onreadystatechange = () => {
        if (this._curUploadRequest.readyState == 4) {
            // handle response
        }
    };

    UpdateFormDigest((<any>window)._spPageContextInfo.webServerRelativeUrl,(<any>window)._spFormDigestRefreshInterval);

    var data = new FormData();
    data.append("uniqueId", uniqueId);
    data.append("pageNum", pageNum);
    data.append("data", files[0]);

    upload.open('POST', "myurl");
    upload.setRequestHeader("X-RequestDigest", $("#__REQUESTDIGEST").val());
    upload.send(data);
};

现在我们来看看实际的错误。

图像使用以下方式渲染:

<img src="url to ASHX service" />

在 FireFox 和 Chrome 中，上传文档中的页面图像始终显示得很好。但在 IE(9、10 或 11)中，它仅呈现其中的第一部分，然后在图像占位符上显示损坏的图像图标。对于这些损坏的图像，IE 的 NET 选项卡显示它收到了 0kb，并且发生了错误事件。但是，如果我在 ASHX 返回流之前在 ASHX 中放置一个断点，它总是有一个大小。

更有趣的是，如果你获取 src 指向的 url，打开一个新窗口并将其粘贴进去，图像就会正常显示。

我什至尝试先像这样在 JavaScript 中加载图像:

var img = new Image();
img.onload = function(){
   // use jquery to append image to page
};
img.src = "url to ASHX service";

在这种情况下，Chrome 和 Firefox 工作正常，但 IE 再次出现故障。除此之外，IE 的 NET 选项卡显示它收到了正确大小的 kb 响应。但是，它仍然显示损坏的图像图标，并且在某个未知阈值后不会将图像渲染到屏幕上。前几张图像会恢复，但一旦其中一张损坏，其余所有图像都会损坏。

我还修改了ASHX服务以返回base64数据而不是流，然后将base64绑定(bind)到src。在调试器中，您可以看到分配给显示损坏图像图标的 img 元素的 src 的 base64。所以数据肯定是存在的，但 IE 只是不渲染它......

我尝试使用knockout JS 在这个 fiddle 中在我们的SharePoint 环境之外重新创建这个问题。基本上，我会抓取大量大图像，然后通过每次单击按钮将它们扔到屏幕上。但效果很好。如果我也使用 jQuery，它会完美地工作。

http://jsfiddle.net/bsdez92f/

不知道从这里去哪里。

有什么想法吗？

Answer 1

事实证明，图像大小导致了问题。我在服务器端将图像缩小到缩略图大小并将其返回到浏览器。此时一切工作正常。