title: jquery rotate an image and save them with same name file (overwrite)?
body: <p>i have a simple scenario like this: I want to rotate an image, and save them existing old file. now, all function is done, but when i download/save the image, it always create new file name. here is my code: </p>
  
  <pre><code> &lt;div&gt;
          &lt;img src="image/a.png" alt="" id="image" /&gt;
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;strong&gt;Rotate Image: &lt;/strong&gt;
          &lt;a href="javascript:;" id="resetImage"&gt;Reset Image&lt;/a&gt;
          &lt;a href="javascript:;" id="rotate90"&gt;90&amp;deg;&lt;/a&gt;
          &lt;a href="javascript:;" id="rotate180"&gt;180&amp;deg;&lt;/a&gt;
          &lt;a href="javascript:;" id="rotate270"&gt;270&amp;deg;&lt;/a&gt;
      &lt;/p&gt;
  
      &lt;a id="download"&gt;Download as image&lt;/a&gt; 
  </code></pre>
  
  <p>my js code :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  
  
  var img = null, canvas = null;
  
  $(document).ready(function(){
     //  Initialize image and canvas
     img = document.getElementById('image');
     canvas = document.getElementById('canvas');
  
     if(!canvas || !canvas.getContext){
         canvas.parentNode.removeChild(canvas);
     } else {
         img.style.position = 'absolute';
         img.style.visibility = 'hidden';
     }
     rotateImage(0);
  
     //  Handle clicks for control links
     $('#resetImage').click(function(){ rotateImage(0); });
     $('#rotate90').click(function(){ rotateImage(90); });
     $('#rotate180').click(function(){ rotateImage(180); });
     $('#rotate270').click(function(){ rotateImage(270); });
  });
  
  function rotateImage(degree)
  {
      if(document.getElementById('canvas')){
         var cContext = canvas.getContext('2d');
         var cw = img.width, ch = img.height, cx = 0, cy = 0;
  
         //   Calculate new canvas size and x/y coorditates for image
         switch(degree){
              case 90:
                  cw = img.height;
                  ch = img.width;
                  cy = img.height * (-1);
                  break;
              case 180:
                  cx = img.width * (-1);
                  cy = img.height * (-1);
                  break;
              case 270:
                  cw = img.height;
                  ch = img.width;
                  cx = img.width * (-1);
                  break;
         }
  
          //  Rotate image            
          canvas.setAttribute('width', cw);
          canvas.setAttribute('height', ch);
          cContext.rotate(degree * Math.PI / 180);
          cContext.drawImage(img, cx, cy);
      } else {
          //  Use DXImageTransform.Microsoft.BasicImage filter for MSIE
          switch(degree){
              case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
              case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
              case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
              case 270: image.style.filter =    'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>thankyou for your response :)</p>