javascript - jquery rotate an image and save them with same name file (overwrite)?

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:

 <div>
        <img src="image/a.png" alt="" id="image" />
        <canvas id="canvas"></canvas>
    </div>
    <p>
        <strong>Rotate Image: </strong>
        <a href="javascript:;" id="resetImage">Reset Image</a>
        <a href="javascript:;" id="rotate90">90&deg;</a>
        <a href="javascript:;" id="rotate180">180&deg;</a>
        <a href="javascript:;" id="rotate270">270&deg;</a>
    </p>

    <a id="download">Download as image</a>

my js code :

<script type="text/javascript">



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;
        }
    }
}
</script>

thankyou for your response :)

 <div>
        <img src="image/a.png" alt="" id="image" />
        <canvas id="canvas"></canvas>
    </div>
    <p>
        <strong>Rotate Image: </strong>
        <a href="javascript:;" id="resetImage">Reset Image</a>
        <a href="javascript:;" id="rotate90">90&deg;</a>
        <a href="javascript:;" id="rotate180">180&deg;</a>
        <a href="javascript:;" id="rotate270">270&deg;</a>
    </p>

    <a id="download">Download as image</a>

my js code :

<script type="text/javascript">



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;
        }
    }
}
</script>

thankyou for your response :)

Share Improve this question edited Mar 4, 2016 at 13:31 Mosh Feu 29.3k18 gold badges93 silver badges141 bronze badges asked Feb 11, 2016 at 10:32 IIM NUR DIANSYAH 4321 gold badge8 silver badges18 bronze badges

1 skenario ? existing old file ? Where is your JS code ? – Rayon Commented Feb 11, 2016 at 10:34
on that code, my image file is a.png. when i click download, it save with different name file. i want existing old file with same name........... – IIM NUR DIANSYAH Commented Feb 11, 2016 at 10:59

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Your question has 2 parts (as I understood)

save them and same name file.

To save them you just need to change the href attribute of the link #download to the dataURL of the image, like this:

$('#download').attr('href', canvas.toDataURL())

You also need to add the download attribute.

Which brings us to the second question with same name - you can specify the name of the file which will be downloaded by setting the download attribute's value as you want, like:

<a id="download" download="you_name_the_file.jpg">Download as image</a>

The full code (it will not work here because of security reason, you can see the live version here)

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);
    $('#download').attr('href', canvas.toDataURL())
  } 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;
    }
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="your_image_url.jpg" alt="" id="image" />
  <canvas id="canvas"></canvas>
</div>
<p>
  <strong>Rotate Image: </strong>
  <a href="javascript:;" id="resetImage">Reset Image</a>
  <a href="javascript:;" id="rotate90">90&deg;</a>
  <a href="javascript:;" id="rotate180">180&deg;</a>
  <a href="javascript:;" id="rotate270">270&deg;</a>
</p>

<a id="download" download="mqdefault.jpg">Download as image</a>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jquery rotate an image and save them with same name file (overwrite)? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)