CANVAS 이미지를 jQuery 로 서버에 업로드하기

CANVAS 이미지를 jQuery 로 서버에 업로드하기

캔버스 이미지를 서버에 저장하는 방법은 많겠지만 jQuery 로 서버에 POST 업로드한 데이터를 php 에서 가공해서 저장하는 방법니다.

▶ HTML 스크립트

<script>

function uploadImage() {

var drawCanvas = document.getElementById('drawCanvas');

var request = $.ajax({

type:'POST',

data: {imgUpload:drawCanvas.toDataURL('image/png')},

url:'../attach/canvasupload.php',

success:function(result){

alert(result);

}

});

}

</script>

<canvas id="drawCanvas" width="320" height="320" style="border:1px solid #000000;">Canvas not supported</canvas>

위에서 POST 로 데이터를 받으면 data:image/png;base64,이미지데이터 형태로 받아진다.

이를 PHP 에서 파싱해서 저장하면 된다.

▶ PHP 파일저장

<?php

$_tmp = split(";base64,", $_POST['imgUpload']);

if(count($_tmp) == 2) {

$filename = "canvas.png";

$imageData = base64_decode($_tmp[1]);

$fp = fopen($filename, "wb");

if($fp) {

fwrite($fp, $imageData);

fclose($fp);

echo "success";

}

else {

echo "failed";

}

}

?>

CANVAS 이미지 그리기 예제 보기 http://itrooms.tistory.com/213