HTML5 캔버스에서 생성 된 이미지의 이름 바꾸기

Question

간단한 캔버스를 만들어 이미지로 저장했습니다.

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

을이 함께 만든 이미지 팝업 :이 코드의 도움으로이 작업을 수행 한

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

을하지만 그 이름은 항상 이상한 하나입니다. faizan.jpg 등의 이미지 이름을 바꾸고 싶습니다. 어떻게해야합니까?

Answer 1

간단히 말하면 사용자가 입력 할 수 없습니다. HTMLCanvasElement에서 toDataURL 메서드를 호출하면 이미지의 문자열 표현이 데이터 URL로 생성됩니다. 따라서 이미지를 저장하려고하면 브라우저에서 기본 파일 이름을 제공합니다 (예 : Opera가 데이터 URL이 png 파일 인 경우 default.png로 저장함).

많은 해결 방법이 있습니다.

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

사람 : 가장 간단한 하나는 서버에 AJAX 호출을 서버 측에 이미지를 저장하고 액세스와 클라이언트 측에 저장할 수 있습니다 저장된 이미지의 URL을 반환하는 것입니다 서버 측에 이미지를 저장하려면 다음 PHP 스크립트를 사용하십시오.

$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

이 작업 100 %! 위의 대답에 약간의 디버깅을해야했습니다.

자바 스크립트 : 여기에 작업 코드의

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"; 
?>