Renommage d'une image créée à partir d'un canevas HTML5

Question

J'ai créé une toile simple et l'enregistre en tant qu'image. Je l'ai fait avec l'aide de ce code:

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 

et pop l'image créée avec ceci:

document.write('<img src="'+img+'"/>'); 

Mais son nom est toujours aussi étrange. Je veux renommer le nom de l'image comme faizan.jpg etc. Comment puis-je faire cela?

Answer 1

Pour le dire simplement, vous ne pouvez pas. Lorsque vous appelez la méthode toDataURL sur HTMLCanvasElement, elle génère une représentation sous forme de chaîne de l'image en tant qu'URL de données. Ainsi, si vous tentez de sauvegarder l'image, le navigateur lui donne un nom de fichier par défaut (par exemple, Opera l'enregistre comme default.png si l'URL de données est un fichier png).

De nombreuses solutions de contournement existent. La plus simple est de faire un appel AJAX à un serveur, enregistrer l'image sur le côté serveur et renvoyer l'URL de l'image enregistrée qui peut alors être accessible et enregistré sur le côté client:

function saveDataURL(canvas) { 
    var request = new XMLHttpRequest(); 
    request.onreadystatechange = function() { 
     if (request.readyState === 4 && request.status === 200) { 
      window.location.href = request.responseText; 
     } 
    }; 
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    request.open("POST", "saveDataURL.php", true); 
    request.send("dataURL=" + canvas.toDataURL()); 
} 

Pour enregistrer l'image sur le côté serveur, utilisez le script PHP suivant:

$dataURL = $_POST["dataURL"]; 
$encodedData = explode(',', $dataURL)[1]; 
$decodedData = base64_decode($encodedData); 
file_put_contents("images/faizan.png", $decodedData); 
echo "http://example.com/images/faizan.png"; 

Answer 2

Cela a fonctionné à 100%! Juste dû faire un peu de débogage à la réponse ci-dessus. Voici le code de travail:

Le JavaScript:

var saveDataURL = function(canvas) { 
    var dataURL = document.getElementById(canvas).toDataURL(); 
    var params = "dataURL=" + encodeURIComponent(dataURL); 

    var request = new XMLHttpRequest(); 
    request.open("POST", "/save-data-url.php", true); 
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    window.console.log(dataURL);  

    request.onreadystatechange = function() { 
    if (request.readyState === 4 && request.status === 200) { 
     window.console.log(request.responseText); 
    } 
    }; 

    request.send(params); 
} 

/scripts/save-data-url.php:

<?php 
    $dataURL = $_POST["dataURL"]; 
    $encodedData = explode(',', $dataURL); 
    $encodedData = $encodedData[1]; 
    $decodedData = base64_decode($encodedData); 
    file_put_contents("images/log.txt", $encodedData); 
    file_put_contents("images/test.png", $decodedData); 
    echo "http://www.mywebsite.com/images/test.png"; 
?>