将图像添加到 IndexedDB ObjectStore

Question

在我们进入任何事情之前，这是代码运行的环境：

 Google Chrome Version 36.0.1985.125 on Windows 7
 Libraries:
   IndexedDBShim
   IDBWrapper
   jQuery1.11+Bootstrap

I used this as my guide

当我尝试将图像添加到 indexedDB objectStore 时，我收到此错误：

 Uncaught DataCloneError: Failed to execute 'add' on 'IDBObjectStore': The object store currently does not support blob values.

这是我打开数据库的方式：

 var version=1;
 var openRequest=indexedDB.open("imgdb",version);
openRequest.onerror=function(e)
{
    console.log("Error when opening database");
    console.log(e);
}

openRequest.onupgradeneeded=function(e)
{
  console.log("The database is being upgraded");
  var thisDB=e.target.result;
  var trans=e.target.transaction;
  var imagesStore;
  if(!thisDB.objectStoreNames.contains("images"))
  {
    //if an objectStore of the name images does not exist create one
    imagesStore=thisDB.createObjectStore("images",{keyPath:"id",autoIncrement:true});
    //Create any indices here...
  }
  else
  {
    //if the objectStore already exists,use it...
    imageStore=trans.objectStore("images");
    //Create any indices here
  }
}

openRequest.onsuccess=function(e)
{
    console.log("Successfully opened the database");
    db=e.target.result;
    console.dir(db);
    db.onerror=function(e)
    {
        console.log("Database error "+e.target.errorCode);
        console.dir(e.target);
    }

}

这是发生错误的地方：

function addImage(img)
{
    console.log("Inserting image into db");
    console.log("The image recieved from xhr");
    console.log(img);
    console.dir(db);
    var trans=db.transaction(["images"],"readwrite");
    var images=trans.objectStore("images");
    var request=images.add({
        title:"marker-image",
        image:img
    });

    request.onsuccess=function(e)
    {
        console.log("Image successfully added to the database");
        getImage();
    };

    request.onerror=function(e)
    {
        console.log("An error occured while inserting the image");
        console.log(e.target.errorCode);
        console.dir(e.target);
    };
}

Answer 1

我认为 blob 支持在稳定版本中还没有起作用。 这是有问题的错误：http://code.google.com/p/chromium/issues/detail?id=108012 6 月 10 日关闭。

我认为它在使用 Chrome beta 通道（或 dev 或 canary 通道）时会起作用，因为它已在闪烁修订版 175802 中修复，chrome 36 是闪烁修订版 173750，所以有点太旧了。

Answer 2

正如 Dick van den Brink 所说，对 blob 的支持目前仅在 Chrome 的开发频道中可用。我在 this link 找到了此问题的答案。我使用此代码插入图像：

 function addImage(img)
 {
    console.log("Inserting image into db");
    console.log("The image recieved from xhr");
    console.log(img);
    var isBlob;
    var request;
    try
    {
      var trans=db.transaction(["images"],"readwrite");
      var images=trans.objectStore("images");
      request=images.add({
        title:"marker-image",
        image:img
      });

      request.onsuccess=function(e)
      {
        console.log("Image successfully added to the database");
        isBlob=true;
        getImage(isBlob);
      };

      request.onerror=function(e)
      {
        console.log("An error occured while inserting the image");
        console.log(e.target.errorCode);
        console.dir(e.target);
      };
    }
    catch(e)
    {
       isBlob=false;
       console.log("Error occured when attempting to insert as blob");
       console.dir(e);
       console.log("Using an alternate method to insert file as blob");
       var reader=new FileReader();
       reader.onload=function(e)
       {
         var trans=db.transaction(["images"],"readwrite");
         var images=trans.objectStore("images");
         var img_alt=e.target.result;
         console.dir(img_alt);
         request=images.add({
            title:"marker-image",
            image:img_alt
         });
         request.onerror=function(e)
         {
            console.log("An error occured while inserting the image");
            console.log(e.target.errorCode);
            console.dir(e.target);
         };

         request.onsuccess=function(e)
         {
            console.log("Image successfully added to the database");
            getImage(isBlob);
         };
        };

        reader.readAsDataURL(img);
    }

}

我使用这段代码来获取保存的图像：

 function getImage(isBlob)
{
    var trans=db.transaction(["images"],"readonly");
    var images=trans.objectStore("images");
    var cursor=images.openCursor();
    cursor.onerror=function(e)
    {
      console.log("An error occured while retrieving the image");
      console.log(e.target.errorCode);
      console.dir(e.target);
    };
    cursor.onsuccess=function(e)
    {
      var imgUrl;
      var res=e.target.result;
      var blob=res.value.image;
      console.log("Successfully retrieved file from db");
      if(isBlob)
      {
        var url=window.URL || window.webkitURL;
        imgUrl=url.createObjectURL(blob);   
      }
      else
      {
        imgUrl=res.value.image;
      }
      console.log("Obtained a url for the image");
      console.log(imgUrl);
      $("#dbImg").attr("src",imgUrl);
      cursor.continue();    
    };
  }