18

当我尝试在 IndexedDB 中为 Chrome 不支持的 blob 创建一个解决方法时，我发现我可以通过 AJAX 作为数组缓冲区读取图像，将其存储在 IndexedDB 中，提取它，将其转换为 blob，然后使用以下代码：

var xhr = new XMLHttpRequest(),newphoto;
xhr.open("GET", "photo1.jpg", true);    
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        newphoto = xhr.response;
        /* store "newphoto" in IndexedDB */
        ...
    }
}

document.getElementById("show_image").onclick=function() {
    var store = db.transaction("files", "readonly").objectStore("files").get("image1");
    store.onsuccess = function() {
        var URL = window.URL || window.webkitURL;
        var oMyBlob = new Blob([store.result.image], { "type" : "image\/jpg" });
        var docURL = URL.createObjectURL(oMyBlob);
        var elImage = document.getElementById("photo");
        elImage.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    }
}

这段代码工作正常。但是，如果我尝试相同的过程，但这次加载视频（.mp4）我无法显示它：

...    
var oMyBlob = new Blob([store.result.image], { "type" : "video\/mp4" });
var docURL = URL.createObjectURL(oMyBlob);
var elVideo = document.getElementById("showvideo");
elVideo.setAttribute("src", docURL);
...
<video id="showvideo" controls ></video>
...

即使我使用 xhr.responseType = "blob" 并且没有将 blob 存储在 IndexedDB 中而是尝试在加载后立即显示它，它仍然无法正常工作！

xhr.responseType = "blob";
xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        newvideo = xhr.response;
        var docURL = URL.createObjectURL(newvideo);
        var elVideo = document.getElementById("showvideo");
        elVideo.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    }
}

下一步是尝试对 PDF 文件做同样的事情，但我被视频文件困住了！

4

1 回答 1

3

这是一个填充答案（通过在他的评论中找到的 OP 解决），以防止问题继续出现在“未回答”的问题下。

来自作者：

好的，我解决了在执行 revokeObjectURL 方法之前添加一个等待视频/图像加载的事件的问题：

var elImage = document.getElementById("photo");
elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } 
elImage.setAttribute("src", docURL);

我想在视频完全加载之前执行 revokeObjectURL 方法。

于 2014-01-06T19:09:10.070 回答