title: JS-Convert an Image object to a jpeg file
body: <p>So, I have a user input which serve to upload pictures. This is a simple example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function handleImage(e){
      var reader = new FileReader();
      reader.onload = function(event){
          var img = new Image();
          img.onload = function(){
              console.log (img);
          }
          img.src = event.target.result;
      }
      reader.readAsDataURL(e.target.files[0]);     
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" onchange="handleImage(event)"&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I display an <code>Image ()</code> on the <code>console</code>. I want to convert this <code>Image</code> into a jpg file.</p>
  
  <p>I understood how to get the pixels of the picture but it's completely crazy to send it to a server: It's to large!</p>
  
  <p>I also tried to access to the jpg file stored in the computer but I do not achieve to anything.</p>
  
  <p>The only way I found is to send it with a <code>form</code> like this:</p>
  
  <pre><code>&lt;form action="anything.php" method="post" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;
  &lt;/form&gt;   
  </code></pre>
  
  <p>And in PHP:</p>
  
  <pre><code>$_FILES["fileToUpload"]["tmp_name"]
  </code></pre>
  
  <p>Why not with JS? </p>
  
  <p>My final goal is to send the jpg file with AJAX.</p>
  
  <p><em>Tell me if you have some questions.</em></p>