jquery вращать изображение и сохранять его с тем же именем файла (переписать)?

Question

У меня такой простой сценарий: я хочу повернуть изображение и сохранить существующий старый файл. теперь вся функция выполняется, но когда я загружаю/сохраняю изображение, он всегда создает новое имя файла. Вот мой код:

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

мой код JS:

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

большое спасибо за ответ :)

Answer 1

Ваш вопрос имеет 2 части (как я понял)

сохранить их и такое же имя файл.

так сохранить их вам просто нужно изменить атрибут href по ссылке #download к dataURL изображения, как это:

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

, конечно, что вы должны установить ссылку атрибут download -

, которые приводят нас ко второму вопросу с таким же именем - вы можете указать имя файла, который будет закачан путем установки атрибута download значения а с вы хотите, как:

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

полный код (он не будет работать здесь из-за соображений безопасности, вы можете увидеть живую версию 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.com/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>