Reading a file created by the media capture plugin in Cordova - Creating Thumbnails

Question

Big picture here is that I'm trying to get a photo gallery working for a large number of photos. Currently I'm using the raw URL of the images as gallery thumbnails, which is incredibly slow and crashes older devices quickly.

I'd like to create a thumbnail of each photo that is taken with my app's camera and store these either locally or on a backend database. However, I haven't found a good solution.

I tried the thumbnailer plugin here but my build failed after installation. I think this only supports Cordova up to 2.9 and I'm using 3.3:

https://github.com/maxbasmanov/PhoneGap_Thumbnailer

Anyway, my next plan is to use HTML5 canvas to resize the image at the point of capture and save it alongside the full-res image. Having a hard time pulling this one off. I'm successfully capturing images using the media capture plugin, which saves to whatever folder it feels like. I can't seem to actually read that file using the fileReader.

The mediaFile URLs look like: file:/storage/emulated/0/DCIM/Camera/235243652435123.jpg and the FileSystem: cdvfile://localhost/persistent

The filesystem.root.getFile method fails with 5: undefined. Perhaps I'm going about this the wrong way?

Here is my code:

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

Solved!

Needed to use

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

not URL.

PhoneGap - storing an image, then getting its base64encoded data