AJAX를 사용하여 HTML5 Canvas 이미지를 서버에 성공적으로 저장하려면 어떻게 해야 합니까?

HTML5 Canvas를 서버에 이미지로 저장

사용자를 위해 생성 아트를 보존하려는 과정에서 저장하는 데 어려움을 겪었습니다. 캔버스에서 서버로의 이미지. 이 문서에서는 특정 문제를 다루고 해결책을 제공합니다.

이전 튜토리얼에서 마련한 기초를 바탕으로 XMLHttpRequest 개체를 사용하여 캔버스 데이터를 저장하려고 했습니다. 이미지 파일이 생성되는 동안 비어 있고 읽을 수 없는 상태로 남아 있습니다.

콘텐츠 유형 자세히 알아보기

이 수수께끼를 푸는 열쇠는 콘텐츠 유형 헤더에 있습니다. AJAX 요청 중에 설정했습니다. 처음에 "application/upload"로 설정된 이 헤더는 논리적인 것처럼 보이지만 웹 서버에서는 널리 지원되지 않습니다.

해결책: Embracing Application/x-www-form-urlencoded

해결책은 Content-Type 헤더를 "application/x-www-form-urlencoded"로 변경하는 것입니다. 이 변경 사항은 양식 데이터를 서버에 제출하기 위해 허용되는 표준에 맞춰 캔버스 데이터를 성공적으로 전송할 수 있습니다.

코드 수정

이 솔루션을 구현하려면 다음을 수정하세요. 귀하의 AJAX 요청은 다음과 같습니다:

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

인증됨 결과

이 수정 사항을 적용한 후 이미지 파일이 이제 0이 아닌 크기로 생성되고 있음을 확인했습니다. 그러나 유효한 이미지로는 읽을 수 없고 볼 수 없는 상태로 남아 있습니다.

추가 탐색

이렇게 하면 해결해야 할 퍼즐이 남아 있습니다. 캔버스 데이터가 전송되는 동안 이미지 데이터의 인코딩이나 포맷에 차이가 있을 수 있습니다. 문제의 정확한 성격을 확인하고 영구적인 해결책을 고안하기 위해서는 추가 조사가 필요합니다.

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