Search code examples
javascriptioscordovalocal-storagelocalforage

Error loading image through localforage blob on ios

I am grabbing camera image on an ios device through Cordova camera API and then saving it through localforage. However, it seems that the resource is not being loaded since clicking on the blob under Resources tag of Safari Web Inspector shows An error occured while trying to load resources error, and the image renders as 20x20 white background instead of photo. Here is my HTML wrapper around Cordova Camera API:

<head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/camera.js"></script>
    <script type="text/javascript" charset="utf-u" src="js/localforage.js"></script>

  <script type="text/javascript">
   function savePhoto(contents){
      localforage.setItem('photo', contents, function(img) {
            // This will be a valid blob URI for an <img> tag.
            var blob = new Blob([img], { type: "image/jpeg" } );
            var imageURI = window.URL.createObjectURL(blob);
            console.log(imageURI);
            var newImg = document.createElement("img");
                newImg.src=imageURI;
                // add the newly created element and its content into the DOM 
                var currentDiv = document.getElementById("div1"); 
                document.body.insertBefore(newImg, currentDiv); 
        });
      console.log(contents.byteLength);
        }

    function grabPhoto(){
      capturePhotoEdit(savePhoto,function(e){console.log(e);});
    }

  </script>

  </head>
  <body>
    <button onclick="grabPhoto();">Capture Photo</button> <br>
    <div id="div1">&nbsp;</div>
  </body>
</html>

We use savePhoto to save down the image grabbed from the camera (in js/camera.js). Console logging of blob prints out stuff like blob:null/916d1852-c8c5-4b3b-ac8c-86b6c71d0e86.

I will very much appreciate pointers on what I am doing wrong here with image rendering.

Solution

  • Fixed now by switching to "Promise" style API. Somehow, it doesn't work for async callback API version. Fixed JS code below:

    function savePhoto(contents){

      localforage.setItem('photo', contents).then(function(image) {
            // This will be a valid blob URI for an <img> tag.
            var blob = new Blob([image],{ type:"image/jpeg" });
            console.log('size=' + blob.size);
            console.log('type=' + blob.type);
            var imageURI = window.URL.createObjectURL(blob);
            var newImg = document.createElement("img");
            newImg.src=imageURI;
            newImg.onload = function() {
               URL.revokeObjectURL(imageUrI);
            };
            var currentDiv = document.getElementById("div1"); 
            document.body.insertBefore(newImg, currentDiv); 

        }).catch(function(err) {
          // This code runs if there were any errors
          console.log(err);
        });
}

function grabPhoto(){
  capturePhotoEdit(savePhoto,function(e){console.log(e);});
}