读取由 Cordova 中的媒体捕获插件创建的文件 - 创建缩略图

Question

这里的大局是我正在尝试让一个照片库为大量照片工作。目前我正在使用图像的原始 URL 作为画廊缩略图，这非常慢并且很快就会使旧设备崩溃。

我想为使用我的应用程序的相机拍摄的每张照片创建一个缩略图，并将其存储在本地或后端数据库中。但是，我还没有找到好的解决方案。

我在这里尝试了缩略图插件，但安装后构建失败。我认为这只支持高达 2.9 的 Cordova，而我正在使用 3.3：

https://github.com/maxbasmanov/PhoneGap_Thumbnailer

无论如何，我的下一个计划是使用 HTML5 画布在捕获点调整图像大小并将其与全分辨率图像一起保存。很难把这个拉下来。我正在使用媒体捕获插件成功捕获图像，该插件可以保存到任何感觉的文件夹中。我似乎无法使用 fileReader 实际读取该文件。

mediaFile URL 如下所示：file:/storage/emulated/0/DCIM/Camera/235243652435123.jpg 和文件系统：cdvfile://localhost/persistent

filesystem.root.getFile 方法失败并返回 5: undefined。也许我正在以错误的方式解决这个问题？

这是我的代码：

function captureSuccess(mediaFiles) { 


      function gotFS(fileSystem) {
        for (var a in mediaFiles) {
          alert('file fullpath: ' + mediaFiles[a].fullPath);
          alert('filesystem URL: ' + fileSystem.root.toURL());
          window.resolveLocalFileSystemURL(mediaFiles[a].fullPath, function(fileEntry) {
                fileEntry.file(function(fileObj) {

                    alert(JSON.stringify(fileObj));
                    newimageURI = fileObj.localURL;
                    alert(newimageURI);

                },
                function(error) {
                  alert('get fileEntry error: ' + error.message);  
                });
              },
              function(error) {
                alert('resolve error: ' + error.message);
              });


              fileSystem.root.getFile(mediaFiles[a].fullPath, {create: false}, gotFileEntry, fail);
           };

      }

      function gotFileEntry(fileEntry) {
        alert('got fileentry');
        fileEntry.file(gotFile, fail);
      }

      function gotFile(file){
        alert('got file');
        resizeFile(file);
      }

      function readDataUrl(file) {
          var reader = new FileReader();
          reader.onloadend = function(evt) {
              console.log("Read as data URL");
              console.log(evt.target.result);
          };
          reader.readAsDataURL(file);
      }

      function fail(error) {
          alert(error.code + ': ' + error.message);
      }

      function resizeFile(file) {
        alert('resize initiated');
        var reader = new FileReader();
        reader.onloadend = function(evt) {         
          alert('read data: ' + evt.target.result);
          var tempImg = new Image();
          tempImg.src = file;
          tempImg.onload = function() {

              var MAX_WIDTH = 250;
              var MAX_HEIGHT = 250;
              var tempW = tempImg.width;
              var tempH = tempImg.height;
              if (tempW > tempH) {
                  if (tempW > MAX_WIDTH) {
                     tempH *= MAX_WIDTH / tempW;
                     tempW = MAX_WIDTH;
                  }
              } else {
                  if (tempH > MAX_HEIGHT) {
                     tempW *= MAX_HEIGHT / tempH;
                     tempH = MAX_HEIGHT;
                  }
              }

              var canvas = document.createElement('canvas');
              canvas.width = tempW;
              canvas.height = tempH;
              var ctx = canvas.getContext("2d");
              ctx.drawImage(this, 0, 0, tempW, tempH);
              var dataURL = canvas.toDataURL("image/jpeg");

              alert('image: ' + JSON.stringify(dataURL));
            }
          }
          reader.readAsDataURL(file);
      }

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

Answer 1

解决了！

需要使用

window.resolveLocalFileSystemURI("content://media/external/images/media/4292", win, fail);

不是网址。

PhoneGap - storing an image, then getting its base64encoded data