title: Saving image from Html5 canvas to phone storage
body: <p>Using Phonegap (javascript), I'm trying to shrink an image the user selects from his gallery and copy it to another folder structure. </p>
  
  <p>I've been trying everything I can think of and am running out of ideas. I know there are a couple of similar questions out there, but none work for me.</p>
  
  <p><strong>Method 1</strong> </p>
  
  <p>Trying to take an image from a canvas object and store it on the phone's local storage using PhoneGap. This works in that I get an image saved, but it's corrupted. I've tried a bunch of different ways. I've tried to use <code>Uint8Array</code>, <code>atob</code> conversion, etc. See some of the code below.</p>
  
  <p><strong>Method 2</strong></p>
  
  <p>Trying to use the copyTo function. However, I'm having two issues with this. 
  1) I don't want the full size image (takes up too much storage space)
  2) The object I'm copying is always 0 bytes, for some reason. </p>
  
  <p>Here's some of the main code, please help.</p>
  
  <pre><code>function gotFileEntry(fe, file, type) {
  alert("gotFileEntry: " + file.size);
  // copy file
  fe.file(function (f) { alert(f.size); }, function (e) { alert(e.code); });
  fe.copyTo(dirImg, "copy.jpg", function(f) {alert("successful copy: " + f.fullPath);}, null);
  
  var reader = new FileReader();
  reader.onloadend = function (event) {
      // shrink image
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var img = document.createElement('img');
      img.src = reader.result;
      img.onload = function () {
          var newWidth = $(".page").width() * .8;
          var newHeight = img.height / img.width * newWidth;
          canvas.width = newWidth;
          canvas.height = newHeight;
          ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, newWidth, newHeight);
  
          // use setTimeout to allow the canvas to finish drawing
          setTimeout(function () {
  
              var shrunkImg = canvasToData(type, canvas); //canvas.toDataURL('image/jpeg');
  
              // save image data to the phone storage
              var imgData64 = canvas.toDataURL("image/png").replace(/data:image\/png;base64,/, ''); //canvas.toDataURL("image/png");//.replace("image/png", "image/octet-stream");                
              setTimeout(function () {
                  dirImg.getFile("test.png", { create: true, exclusive: false }, function (f) { getWin(imgData64, f); }, getFail);
                  //dirImg.getFile(file.name, { create: true, exclusive: false }, function (f) { getWin(imgData, f); }, getFail);
              }, 0);
  
              setTimeout(function () {
                  // returns data as Uint8Array array
                  var data = Base64Binary.decode(imgData64);
                  dirImg.getFile("test2.png", { create: true, exclusive: false }, function (f) { getWin(data, f); }, getFail);
                  //dirImg.getFile(file.name, { create: true, exclusive: false }, function (f) { getWin(imgData, f); }, getFail);
              }, 0);
              //var uintArray = Base64Binary.decode(data);
              //fe.createWriter(gotFileWriter, function (error) { alert("CreateWriter failed: " + error.code); });
  
              // Save the image path to the database
              editCardView.card().UpdateImagePath(fe.fullPath);
  
              // Display the image
              $("#imgDisplay").attr({ "src": shrunkImg });
          }, 0)
  
      }
  };
  reader.onerror = function (event) {
      errorHandler2(event.target.error.code);
  };
  reader.readAsDataURL(file);
  }
  
  function getWin(data, f) { f.createWriter(function(w) { writeWin(data, w); }, writeFail); };
  function writeWin(data, writer) {
  
      writer.write(data);
      //writer.write(atob(data64)); 
  };
  </code></pre>