title: How to upload image after cropping?
body: <p>Im using java script to crop full size image and make a thumbnail.Everything is okay but i want know how to upload cropped thumbnail after editing it? Is there anyway to upload it?</p>
  
  <p>My code - 
  When clicks on Edit thumbnail , we can crop the full size image and when cropping its visible in <strong>previewimage</strong> sector - after cropping full size image , we can click Apply Changes - when click that button java script function activates - On click         </p>
  
  <pre><code>   var lassoEnd = function() {
                $('thumbnail-controller').innerHTML = "&lt;div&gt;&lt;img class='loading_icon' src='public/loading.gif'/&gt;Loading...&lt;/div&gt;";
                lassoCrop.destroy();
  
              I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE !
  
              }
  </code></pre>
  
  <p>In that function i want to upload my created thumbnail..please help me!</p>
  
  <pre><code> &lt;div id="preview-thumbnail" class="preview-thumbnail"&gt;
      &lt;img src="&lt;?php echo $thumb ?&gt;" alt="" id="previewimage" class="thumb_icon item_photo_user  thumb_icon" /&gt;  &lt;/div&gt;
    &lt;div id="thumbnail-controller" class="thumbnail-controller"&gt;
      &lt;a href="javascript:void(0);" onclick="lassoStart();"&gt;Edit Thumbnail&lt;/a&gt;  &lt;/div&gt;
  
  
  
  
  &lt;script type="text/javascript"&gt;
          var orginalThumbSrc;
          var originalSize;
          var loader = new Element('img',{ src:'public/loading.gif'});
          var lassoCrop;
  
          var lassoSetCoords = function(coords)
          {
            var delta = (coords.w - 48) / coords.w;
  
            $('coordinates').value =
              coords.x + ':' + coords.y + ':' + coords.w + ':' + coords.h;
  
            $('previewimage').setStyles({
              top : -( coords.y - (coords.y * delta) ),
              left : -( coords.x - (coords.x * delta) ),
              height : ( originalSize.y - (originalSize.y * delta) ),
              width : ( originalSize.x - (originalSize.x * delta) )
            });
          }
  
          var lassoStart = function()
          {
            if( !orginalThumbSrc ) orginalThumbSrc = $('previewimage').src;
            originalSize = $("lassoImg").getSize();
  
            lassoCrop = new Lasso.Crop('lassoImg', {
        ratio : [1, 1],
        preset : [10,10,58,58],
        min : [48,48],
        handleSize : 8,
        opacity : .6,
        color : '#7389AE',
        border : '/public/photo/crop.gif',
        onResize : lassoSetCoords,
              bgimage : ''
            });
  
            $('previewimage').src = $('lassoImg').src;
            //$('preview-thumbnail').innerHTML = '&lt;img id="previewimage" src="'+sourceImg+'"/&gt;';
            $('thumbnail-controller').innerHTML = '&lt;a hef="javascript:void(0);" onclick="lassoEnd();"&gt;Apply Changes&lt;/a&gt; or &lt;a href="javascript:void(0);" onclick="lassoCancel();"&gt;cancel&lt;/a&gt;';
            $('coordinates').value = 10 + ':' + 10 + ':' + 58+ ':' + 58;
          }
  
          var lassoEnd = function() {
            $('thumbnail-controller').innerHTML = "&lt;div&gt;&lt;img class='loading_icon' src='public/loading.gif'/&gt;Loading...&lt;/div&gt;";
            lassoCrop.destroy();
  
          I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE !
  
          }
  
  
        &lt;/script&gt;
  </code></pre>