2016-08-26 4 views
0

Я захватываю изображение камеры на устройстве ios через API камеры Кордовы, а затем сохраняю его через localforage. Однако, похоже, что ресурс не загружается, так как нажатие на blob под Resources tag Safari Web Inspector показывает An error occured while trying to load resources об ошибке, а изображение отображается как 20x20 белый фон вместо фотографии. Вот мой HTML оберткой Cordova Camera API:Ошибка загрузки изображения через localforage blob на ios

<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> 

savePhoto Мы используем, чтобы сохранить вниз изображение схватился с камеры (в js/camera.js). Консоль регистрации blob печатает такие вещи, как blob:null/916d1852-c8c5-4b3b-ac8c-86b6c71d0e86.

Я очень ценю указатели на то, что я делаю неправильно здесь, с изображением.

ответ

0

Исправлено сейчас, переключившись на API-интерфейс «Promise». Так или иначе, он не работает для версии API асинхронного обратного вызова. Исправлен код JS ниже:

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