jquery旋转图像并用同名文件保存（覆盖）？

我有一个这样的简单场景：我想旋转图像，并保存现有的旧文件。 现在，所有function都已完成，但是当我下载/保存图像时，它始终会创建新的文件名。 这是我的代码：

   
 
 Rotate Image:  Reset Image 90° 180° 270° 
 Download as image 

我的js代码：

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

感谢您的答复 ：）

Answer 1

你的问题有2个部分（据我所知）

保存它们和同名文件 。

因此，要保存它们，您只需将链接#download的属性href更改为图像的dataURL，如下所示：

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

当然你必须设置链接属性download –

这将我们带到同名的第二个问题 – 您可以通过设置download属性的值来指定要下载的文件的名称，例如：

 Download as image 

完整的代码（由于安全原因，它在这里不起作用，你可以在这里看到实时版本）

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

  
   
 
 Rotate Image:  Reset Image 90° 180° 270° 
 Download as image