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