Mengapa Imej Kanvas HTML5 Saya Rosak Semasa Menyimpan ke Pelayan?

Menyelesaikan Masalah Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan

Masalah

Selepas mengikuti tutorial dalam talian, cuba menyimpan Kanvas HTML5 sebagai imej pada pelayan mengakibatkan fail rosak atau kosong. Puncanya masih tidak diketahui.

Penyelesaian

1. Konfigurasikan XMLHttpRequest dengan betul:

• Ganti ciptaan XMLHttpRequest tersuai dengan yang berikut untuk menyokong pelayar lama dan moden:

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

• Tetapkan Jenis Kandungan kepada application/x-www-form-urlencoded:

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

2. Ubah suai Skrip PHP:

• Tukar substr($imageData, strpos($imageData, ","")) kepada substr($imageData, strpos($imageData, ","")) 1 .
• Kendalikan kemungkinan ralat dengan menyemak sama ada pemegang fail sah sebelum penulisan:

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

JavaScript dan Kod PHP yang disemak:

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);
  }
}
?>

Atas ialah kandungan terperinci Mengapa Imej Kanvas HTML5 Saya Rosak Semasa Menyimpan ke Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!