title: Blank image after resizing in canvas
body: <p>I'm trying to resize an image using the canvas method. I am then getting the ArrayBuffer and using that to upload the new image. Here's my resize method.</p>
  
  <pre><code>function resizeImage(img) {
    var perferedWidth = 160;
    var ratio = perferedWidth / img.width;
    var $canvas = $("#canvasTest");
    var canvas = $("#canvasTest")[0];
    canvas.width = img.width * ratio;
    canvas.height = img.height * ratio;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0,0,canvas.width, canvas.height);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer;
    return imageData;
  }
  </code></pre>
  
  <p>The problem is once the image gets uploaded, it's just a blank image. I am not doing something correct as the imageData is not giving me a valid buffer. I know it's not valid because when I convert the imageData to a base64 string, it's not a valid base64 encoded image (image doesn't show up when I set its src to it). </p>
  
  <p>I also know that the <code>drawImage</code> method is working, as I have temporarily created a canvas in the DOM and it is correctly drawing the image to that canvas.</p>
  
  <p>What am I doing wrong? Thanks!</p>