HTML5 캔버스를 서버에 이미지로 저장하려면 어떻게 해야 합니까?

HTML5 캔버스를 서버에 이미지로 저장

HTML5 캔버스를 서버에 이미지로 저장하려면 다음 단계를 따르세요.

1. 캔버스를 이미지 데이터 URL로 변환

var canvasData = canvas.toDataURL("image/png");

2. XMLHttpRequest 객체 생성

var ajax = new XMLHttpRequest();

3. POST 요청 열기 및 요청 헤더 설정

ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4. 캔버스 데이터 보내기

ajax.send("imgData=" + canvasData);

5. 응답 처리

ajax.onreadystatechange = function() {
  console.log(ajax.responseText);
}

6. PHP 서버에서

캔버스 데이터를 받아 PNG 파일로 서버에 씁니다:

<?php
if (!empty($_POST['imgData'])) {
  // Convert base64 data to raw data
  $imgData = base64_decode($_POST['imgData']);

  // Set path and open file
  $fp = fopen('/path/to/file.png', 'wb');

  // Write raw data to file and close
  fwrite($fp, $imgData);
  fclose($fp);
}
?>

추가 참고 사항:

• /path/to/file.png를 원하는 파일로 바꾸세요. 경로.
• 서버 디렉토리가 쓰기 가능한지 확인하세요.
• 필요한 경우 AJAX 요청 헤더를 multipart/form-data로 설정할 수도 있습니다.
• 이미지 데이터 URL이 비표준 문자가 포함되어 있으면 encodeURIComponent()를 사용하여 이스케이프하세요.

위 내용은 HTML5 캔버스를 서버에 이미지로 저장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!