JavaScript와 PHP를 사용하여 HTML5 Canvas 이미지를 서버에 저장하는 방법은 무엇입니까?

HTML5 캔버스를 서버에 이미지로 저장하는 방법

사용자가 HTML5 캔버스에서 생성된 이미지를 저장할 수 있도록 하는 방법 , 당신은 어려움을 겪었습니다. 이 문제를 해결하기 위한 향상된 접근 방식은 다음과 같습니다.

JavaScript 코드:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var formData = new FormData();

  formData.append("canvasData", canvasData);

  var ajax = new XMLHttpRequest();
  ajax.open("POST", "save-image.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  };
  ajax.send(formData);
}

PHP 코드 (save-image.php):

if (isset($_POST["canvasData"])) {
  $data = $_POST["canvasData"];
  $uri = substr($data, strpos($data, ",") + 1);

  $fp = fopen('/path/to/file.png', 'wb');
  fwrite($fp, base64_decode($uri));
  fclose($fp);
}

분석:

1. JavaScript 함수에서 캔버스 데이터를 수집합니다.
2. 직접 XHR 요청을 사용하는 대신 다중 부분/양식 데이터를 허용하는 FormData를 활용합니다.
3. PHP 측에서는 POST를 통해 canvasData를 수락하고 실제 이미지 데이터를 추출합니다.
4. 쓰기 가능한 파일을 생성하고 디코딩된 base64로 인코딩된 이미지 데이터를

팁:

• '/path/to/file.png'에 적절한 쓰기 권한이 있는지 확인하세요.
• 이미지가 손상되었거나 비어 있는 것으로 나타나면 JavaScript 함수에 의해 전송되는 데이터 유형이 PHP의 예상 데이터 유형과 일치하는지 확인하십시오. 스크립트.

위 내용은 JavaScript와 PHP를 사용하여 HTML5 Canvas 이미지를 서버에 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!