在iOS上通过localforage Blob加载图像时出错

Question

I am grabbing camera image on an ios device through Cordova camera API and then saving it through localforage . 我正在通过Cordova相机API在ios设备上捕获相机图像，然后通过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. 但是，似乎没有加载资源，因为单击Safari Web Inspector Resources标签下的blob会显示An error occured while trying to load resources发生错误错误，并且图像呈现为20x20白色背景而不是照片。 Here is my HTML wrapper around Cordova Camera API : 这是我关于Cordova Camera API HTML包装器：

<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 ). 我们使用savePhoto来保存从相机获取的图像（在js/camera.js ）。 Console logging of blob prints out stuff like blob:null/916d1852-c8c5-4b3b-ac8c-86b6c71d0e86 . blob控制台日志记录会打印出blob:null/916d1852-c8c5-4b3b-ac8c-86b6c71d0e86 。

I will very much appreciate pointers on what I am doing wrong here with image rendering. 我非常感谢您指出我在图像渲染方面做错的事情。

Answer 1

Fixed now by switching to "Promise" style API. 现在已通过切换为“ Promise”样式的API进行了修复。 Somehow, it doesn't work for async callback API version. 某种程度上，它不适用于异步回调API版本。 Fixed JS code below: 修复了以下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);});
}

在iOS上通过localforage Blob加载图像时出错

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-28 01:47:27

在iOS上通过localforage Blob加载图像时出错

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-28 01:47:27

解决方案1
0 已采纳 2016-08-28 01:47:27