title: FireFox : image base64 data using canvas object not working
body: <p>This is the code i wrote to resize the image in aspect ratio, it works on chrome but not display on firefox, does anyone know what is wrong.</p>
  
  <pre><code>var image = new Image();
  
          image.src = data;
  
          //$(image).load(function () {
  
              var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')),
                                parseFloat($(image).prop('naturalHeight')),
                                dstWidth,
                                dstHeight);
  
              var canvas = document.createElement('canvas');
              canvas.width = dstWidth;
              canvas.height = dstHeight;
  
              var x = (dstWidth - aspectRatio[0]) / 2;
              var y = (dstHeight - aspectRatio[1]) / 2;
              var ctx = canvas.getContext("2d");
                  ctx.drawImage(image, x, y, aspectRatio[0], aspectRatio[1]);
  
              return canvas.toDataURL("image/png");
  </code></pre>
  
  <p>This is work it generated by the canvas.toDataURL</p>
  
  <blockquote>
    <p>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQEAAADACAYAAAAEL9ZYAAAA1klEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwYD7QAB/UrDfgAAAABJRU5ErkJggg==</p>
  </blockquote>