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测试版频道（或开发版或金丝雀频道）时会有效，因为它在blink修订版175802中已修复，Chrome 36是闪烁修订版173750所以有点太旧了。

Answer 2

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

 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();    
    };
  }

将图像添加到IndexedDB ObjectStore

2 个答案: