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

What happens if you use resolveLocalFileSystemURL() on the file:// url to get a file entry? — Raymond Camden, Apr 10 '14 at 11:26
Added some error handlers to the resolveLocalFileSystemURL() code and tried again. "undefined" is the error.message. — mpsyp, Apr 10 '14 at 15:36
You got that on the resolveLocalFileSystemURL call specifically? — Raymond Camden, Apr 10 '14 at 16:27
Correct. The first error handler in the rLFSURL gets called with "resolve error: undefined". Another side question: What's the difference between the file URL I get from the media capture plugin and a URI? I'm having a hard time understanding whether they are the same thing... thanks for sticking with this! — mpsyp, Apr 10 '14 at 20:07
I'm testing on a Droid RAZR Maxx, Android 4.2, I believe. I have access to a Nexus 5 with 4.4 on it, but haven't tested on that yet. — mpsyp, Apr 11 '14 at 02:53
possible duplicate of [PhoneGap - storing an image, then getting its base64encoded data](http://stackoverflow.com/questions/9404040/phonegap-storing-an-image-then-getting-its-base64encoded-data) — Howli, May 23 '14 at 13:22
This is close to a duplicate but there is some additional information here that may be of use to someone. Chrome console, for instance, says that the resolveLocalFileSystemURI method is deprecated, and to use resolveLocalFileSystemURL, but the latter does not work. I was trying the URL method for days until I tried URI... — mpsyp, May 23 '14 at 17:50
To get the error # you need to read error.code, not error.message. — Chris Rae, May 20 '15 at 22:04

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

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

edited May 23 '17 at 10:30

Community

1
1

answered May 04 '14 at 03:55

mpsyp

472
3
17

1

FWIW for me this displays in the console "resolveLocalFileSystemURI is deprecated. Please call resolveLocalFileSystemURL instead.". It also doesn't work (for me, at least, but I might have a different problem). – Chris Rae May 20 '15 at 22:02

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

1 Answers1

Linked