title: A image converted with canvas fails to be read by python PIL _io.BytesIO
body: <p>Python PIL rejects to read an image you have resized with Javascript canvas</p>
  
  <p>I resize an image on the client-side with Javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>var reader = new FileReader();
      reader.onload = function (e) {
          el('image-picked').src = e.target.result;
          el('image-picked').className = '';
          var image = new Image();
  
          //compress Image
          image.onload=function(){
              el("image-picked").src=image.src;
              var canvas=document.createElement("canvas");
              var context=canvas.getContext("2d");
              new_size = get_sizes(image.width,image.height,max_side_px)
              [canvas.width,canvas.height] = new_size;
              context.drawImage(image,
                  0,
                  0,
                  image.width,
                  image.height,
                  0,
                  0,
                  canvas.width,
                  canvas.height
              );
              console.log("Converted");
  
              //el('image-picked').className = 'no-display'
              //el('image-picked').src=""
              el('upload-Preview').className = ''
              el('upload-Preview').src = canvas.toDataURL("image/png", quality);
  </code></pre>
  
  <p>The result seems ok, less size, seemingly ok:
  <a href="https://i.stack.imgur.com/Gi9p2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gi9p2.jpg" alt="enter image description here"></a> 
  There are only minor differences on the files with <code>identify</code>:
  <a href="https://i.stack.imgur.com/G3buJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G3buJ.jpg" alt="enter image description here"></a></p>
  
  <pre class="lang-sh prettyprint-override"><code>(base) ➜  Desktop file before.png after.png
  before.png: PNG image data, 4048 x 3036, 8-bit/color RGB, non-interlaced
  after.png:  PNG image data, 500 x 375, 8-bit/color RGBA, non-interlaced
  </code></pre>
  
  <p>Then I send the file via POST:</p>
  
  <pre class="lang-js prettyprint-override"><code>    var xhr = new XMLHttpRequest();
      var loc = window.location
      xhr.open('POST', `${loc.protocol}//${loc.hostname}:${loc.port}/analyze`, true);
      xhr.onerror = function() {alert (xhr.responseText);}
      xhr.onload = function(e) {
          if (this.readyState === 4) {
              var response = JSON.parse(e.target.responseText);
              el('result-label').innerHTML = `Result = ${response['result']}`;
          }
      }
  
      var fileData = new FormData();
      var file = new File([el('upload-Preview').src],
        "image.png", { type: "image/png",
                       lastModified : new Date()});
      fileData.append('file', uploadFiles[0]);
      xhr.send(fileData);
  </code></pre>
  
  <p>And then I read on the server with python <code>open_image(BytesIO(img_bytes))</code>  : </p>
  
  <pre class="lang-py prettyprint-override"><code>@app.route('/analyze', methods=['POST'])
  async def analyze(request):
      data = await request.form()
      img_bytes = await (data['file'].read())
      img = open_image(BytesIO(img_bytes))
  </code></pre>
  
  <p>The above <strong>works</strong> without problems with any normal image, but it <strong>fails</strong> with any image that is the result of the resize with js, and the error is  </p>
  
  <pre class="lang-py prettyprint-override"><code>File "/Users/brunosan/anaconda3/envs/fastai/lib/python3.7/site-packages/PIL/Image.py", line 2705, in open
      % (filename if filename else fp))
  OSError: cannot identify image file &lt;_io.BytesIO object at 0x124ce6360&gt;```
  </code></pre>
  
  <p>I've tried <code>canvas.toDataURL("image/jpeg", quality)</code> on the JS side, and reading directly with PIL (not fastai, which calls PIL). It's the same error :frowning_face:</p>