2014-12-16 3 views
2

캔버스를 이미지로 변환하고 사용자가 양식을 제출할 때 서버에 업로드하는 중입니다. 이미지가 올바르게 게시되었지만 서버에서 비어있는 것으로 나타납니다. 여기 캔버스 .. toDataURL 업로드하여

는 .. .drawImage()은 main.js에 내 코드 (오전 사용 폰갭)하지만 canvas..toDataURL는 HTML

<script> 

function insert() 
{ 
var img = document.getElementById("myCanvas")[0].toDataURL("image/jpeg"); 
$.ajax({ 
type: "POST", 

url: "http://*******************/create.php?title="+  ($("#myTitle").val())+"&description=" 
+$("#myDesc").val()+"&price="+$("#myPrice").val(), 

data: {img: img}, 
success: function(data) 
{ 
    alert("inserted"); 
}}); 

</script> 

PHP

$img = $_POST['img']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 

어떤 생각에서 스크립트에 ?

EDIT !!!

마지막으로 업로드 중입니다 !!!

Jack Franzen의 제안에 감사드립니다. 내가

$img = $_POST['img']; 
$img = str_replace('data:image/jpeg;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = uniqid() . '.jpg'; 
$success = file_put_contents($file, $data); 

에 PHP 코드를 변경 한과 매력으로 노력하고 있습니다! :)

+0

내가 도움이 될 수 다행! –

+0

알아 두셨으므로 자바 스크립트 부분은 좋습니다. PHP 부분에서는 구현을 [PHP-FileUpload] (https://github.com/delight-im/PHP-FileUpload) 호출로 바꿀 수 있습니다. 여기에는 ['DataUriUpload'] (https : // github .com/delight-im/PHP-FileUpload/blob/023f812226673ac9e0696d8a3579bb7380606da/src/DataUriUpload.php), [here] (https://github.com/delight-im/PHP-FileUpload/tree/023f812226673ac9e0696d8a3579bb7380606dda#data-uri) - 업로드). 하나 이상의 MIME 유형을 승인하고 확장 프로그램에 매핑하고, 파일 이름을 선택하고, 크기를 확인하는 등 모든 작업을 처리합니다. – caw

답변

1

나는 당신의 문제를 안다! 귀하의 PHP 코드는 "PNG"를 찾고 있습니다,하지만 자바 스크립트는 toDataURL에 "JPG"

그냥 toDataURL 전환 ("이미지/JPEG")를()를 생성한다

+1

답변 해 주셔서 감사합니다. 내가 제안한대로 코드를 변경했습니다. 또한 try() 및 catch()를 적용하면 catch 된 오류가 발생합니다 (Uncaught TypeError : null의 toDataURL 속성을 읽을 수 없음). 여전히 비어있는 것으로 보입니다. – user3085433

관련 문제