title: Resize image before submit the form html5
body: <p>I need to resize an image in the client and add it to the form before submit.</p>
  
  <p>Here is the full html:</p>
  
  <pre><code>&lt;html&gt;
     &lt;body&gt;
        &lt;form action="url"&gt;
           &lt;label&gt;&lt;b&gt;Avatar image:&lt;/b&gt;&lt;/label&gt;
           &lt;input type="file" id="imageLoader" name="avatar" onchange="return ShowImagePreview( this, 0 );" /&gt;&lt;br /&gt;    
           &lt;canvas id="imageCanvas" class="previewcanvas" width="133" height="100"&gt;&lt;/canvas&gt;
           &lt;br /&gt;
           &lt;input type="submit" value="Save" /&gt;
        &lt;/form&gt;
        &lt;script&gt;
           var imageLoader = document.getElementById('imageLoader');
           function HandleFileEvent( event, selection )
           {
               var img = new Image; 
               img.onload = function( event ) { UpdatePreviewCanvas( event, img, selection ) }
               img.src = event.target.result;
           }
  
           function ShowImagePreview( object, selection )
           {
               if( typeof object.files === "undefined" )
                   return;
  
               var files = object.files;
  
               if( !( window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob ) )
               {
                 alert('The File APIs are not fully supported in this browser.');
                 return false;
               }
  
               if( typeof FileReader === "undefined" )
               {
                   alert( "Filereader undefined!" );
                   return false;
               }
  
               var file = files[0];
  
               if( file !== undefined &amp;&amp; file != null &amp;&amp; !( /image/i ).test( file.type ) )
               {
                   alert( "File is not an image." );
                   return false;
               }
  
               reader = new FileReader();
               reader.onload = function( event ) { HandleFileEvent( event, selection ) }
               reader.readAsDataURL( file );
           }
  
           function UpdatePreviewCanvas( event, img, selection )
           {    
               var canvas = document.getElementById('imageCanvas');
               var context = canvas.getContext( '2d' );
  
               var world = new Object();
               world.width = canvas.offsetWidth;
               world.height = canvas.offsetHeight;
  
               canvas.width = world.width;
               canvas.height = world.height;
  
               var WidthDif = img.width - world.width;
               var HeightDif = img.height - world.height;
  
               var Scale = 0.0;
               if( WidthDif &gt; HeightDif )
               {
                   Scale = world.width / img.width;
               }
               else
               {
                   Scale = world.height / img.height;
               }
               if( Scale &gt; 1 )
                   Scale = 1;
  
               var UseWidth = Math.floor( img.width * Scale );
               var UseHeight = Math.floor( img.height * Scale );
  
               var x = Math.floor( ( world.width - UseWidth ) / 2 );
               var y = Math.floor( ( world.height - UseHeight ) / 2 );
  
               context.drawImage( img, x, y, UseWidth, UseHeight );  
           }
        &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Where I thought of is to put the image to the canvas but I do not know how to bring it back to input.</p>
  
  <p>(using this <a href="http://www.rectorsquid.com/previewtest.php" rel="nofollow">link</a>)</p>