서버에 저장할 때 HTML5 Canvas 이미지가 손상되는 이유는 무엇입니까?

HTML5 캔버스를 서버에 이미지로 저장하는 문제 해결

문제

온라인 튜토리얼을 따른 후 HTML5 캔버스를 이미지로 저장하려고 합니다. 서버에서 파일이 손상되거나 빈 파일이 발생합니다. 원인은 아직 알 수 없습니다.

해결책

1. XMLHttpRequest를 올바르게 구성하십시오.

• 이전 브라우저와 최신 브라우저를 모두 지원하려면 사용자 정의 XMLHttpRequest 생성을 다음으로 바꾸십시오.

var xmlHttpReq = false;
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

• 콘텐츠 유형 application/x-www-form-urlencoded:

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

2. PHP 스크립트 수정:

• substr($imageData, strpos($imageData, ","))를 substr($imageData, strpos($imageData, ","))로 변경 1 .
• 이전에 파일 핸들이 유효한지 확인하여 잠재적인 오류를 처리하세요. 쓰기:

if ($fp) {
  fwrite($fp, $unencodedData);
  fclose($fp);
}

수정된 JavaScript 및 PHP 코드:

JavaScript

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

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

PHP

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",")+1);
  $unencodedData = base64_decode($filteredData);

  if ($fp = fopen('/path/to/file.png', 'wb')) {
    fwrite($fp, $unencodedData);
    fclose($fp);
  }
}
?>

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