캔버스 태그에서 PHP 서버로 이미지를 저장하는 방법은 무엇입니까?

Question

난 내가 제로 크기의 PNG 파일 이미지를 가지고이 코드를 실행할 때이

var testCanvas = document.getElementById('canvas-1'); 
var canvasData = testCanvas.toDataURL("image/png"); 
var ajax = new XMLHttpRequest(); 
ajax.open("POST",'http://www.domain.com/imgsave.php',true); 
ajax.setRequestHeader('Content-Type', 'canvas/upload'); 
ajax.send("canvasData"+canvasData); 

내 PHP 코드와 같은 자바 스크립트 코드는이

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
    // Get the data 
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 

    $filteredData=substr($imageData, strpos($imageData, ",")+1); 

    $unencodedData=base64_decode($filteredData); 
    $fp = fopen('test.png', 'wb'); 
    fwrite($fp, $unencodedData); 
    fclose($fp); 
     echo "saved"; 
} 
    else{ 

    echo "no raw data"; 
    } 

처럼 있나요? 내 코드의 문제점은 무엇입니까?

Answer 1

최근에 직접해야했습니다.

먼저 내 canvasData를 숨겨진 필드에 넣고 내 PHP 페이지에 게시했습니다.

그것은 다시이 형식으로 제공 : data:image/png;base64,iVBORw0......

는이 같은 최대 데이터를 먼저 분리해야합니다 data:image/png;base64, 헤더 정보입니다. 나머지는 인코딩 된 데이터입니다.

//Create the image 
$fp = fopen('sigs/test1.png', 'w'); 
fwrite($fp, $unencoded); 
fclose($fp); 

을 그리고 나는 그것으로 원하는 건 뭐든지 할 읽어 :

$rawData = $_POST['imageData']; 
$filteredData = explode(',', $rawData); 

$unencoded = base64_decode($filteredData[1]); 

그때 내 서버에있는 이미지를 만들 수 있습니다.

$file_name = 'test1.png'; 
$file_size = strlen($filteredData[1])/1024; //This may be wrong, doesn't seem to break for me though. 


$fh = fopen('sigs/test1.png', 'r'); 
$content = fread($fh, $file_size); 
$content = base64_encode($content); 
fclose($fh); 

나는 훨씬 더 우아한 해결책이 있다는 것을 확신하지만 이것은 나를 위해 일 해왔다. 더 (아마도) 정보를

확인이하십시오 comment in the manual에 따르면 My own question

Answer 2

는 HTTP_RAW_POST_DATA를 얻기 위해, 당신은 같은 것을 할 필요가 :

이

<?php $postdata = file_get_contents("php://input"); ?> 

매뉴얼이 래퍼에 대해이 말한다 같은 php://input로 : // 입력 대신 $의 HTT : POST 요청의 경우

, PHP를 사용하는 것이 바람직하다 P_RAW_POST_DATA는 특별한 php.ini 지시어에 의존하지 않으므로.

Answer 3

저는 캔버스에서 아약스를 통해 이미지를 저장합니다. 나는 클라이언트 측에서 jQuery를 사용

jQuery.ajax({ 
    url: 'save.php', 
    type: 'POST', 
    data: { 
     data: c.toDataURL('image/png') 
    }, 
    complete: function(data, status) 
    { 
     if(status=='success') 
     { 
      alert('saved!'); 
     } 
     alert('Error has been occurred'); 
    } 

}); 

PHP :

$based64Image=substr($_POST['data'], strpos($_POST['data'], ',')+1); 

    $image = imagecreatefromstring(base64_decode($based64Image)); 

    $fileName=''; 
    if($image != false) 
    { 
     $fileName=time().'.png'; 
     if(!imagepng($image, $fileName)) 
     { 
//   fail; 
     } 
    } 
    else 
    { 
//   fail; 
    } 

도움이 되었기를 바랍니다.