HTML5 Canvas 이미지를 서버에 저장하는 방법은 무엇입니까?

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

생성 예술 프로젝트에는 생성된 이미지를 서버에 저장하는 기능이 필요한 경우가 많습니다. 관련 단계는 다음과 같습니다.

1. HTML5 캔버스에 이미지 만들기: 생성 알고리즘을 사용하여 HTML5 캔버스에 이미지를 만듭니다.
2. 캔버스를 이미지로 서버에 저장: 캔버스를 이미지로 저장하려면 JavaScript와 PHP.

JavaScript 코드:

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

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.send("imgData=" + canvasData);
}

PHP(testSave.php):

<?php $data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

공통 문제:

• 비어 있거나 손상된 파일: 파일 경로가 쓰기 가능하고 JavaScript 요청의 콘텐츠 유형이 "application/x-www로 설정되어 있는지 확인하세요. -form-urlencoded."
• Base64 문자열: 콘솔은 이미지 형식이 아닌 큰 base64 문자열입니다.
• 잘못된 콘텐츠 유형: canvas.toDataURL()을 호출할 때 콘텐츠 유형은 "image/png"여야 합니다.

추가 팁:

• CORS(Cross-Origin Resource Sharing)로 인해 요청이 완료되지 않을 수 있습니다. 서버 설정을 확인하세요.
• 이미지 뷰어를 사용하여 저장된 파일의 유효성을 검사하세요.

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