title: Reading a file created by the media capture plugin in Cordova - Creating Thumbnails
body: <p>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.  </p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <p><a href="https://github.com/maxbasmanov/PhoneGap_Thumbnailer" rel="nofollow">https://github.com/maxbasmanov/PhoneGap_Thumbnailer</a></p>
  
  <p>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. </p>
  
  <p>The mediaFile URLs look like: file:/storage/emulated/0/DCIM/Camera/235243652435123.jpg
  and the FileSystem: cdvfile://localhost/persistent</p>
  
  <p>The filesystem.root.getFile method fails with 5: undefined.  Perhaps I'm going about this the wrong way?   </p>
  
  <p>Here is my code:</p>
  
  <pre><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 &gt; tempH) {
                    if (tempW &gt; MAX_WIDTH) {
                       tempH *= MAX_WIDTH / tempW;
                       tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH &gt; 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);
  </code></pre>