Bagaimana untuk Menyimpan Imej Kanvas HTML5 ke Pelayan Menggunakan JavaScript dan PHP?

Cara Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan

Dalam usaha anda untuk membenarkan pengguna menyimpan imej yang dijana daripada kanvas HTML5 , anda menghadapi kesukaran. Untuk menyelesaikan masalah ini, berikut ialah pendekatan yang dipertingkatkan:

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

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

Pecahan:

1. Kami mengumpulkan data kanvas dalam fungsi JavaScript.
2. Daripada menggunakan permintaan XHR langsung, kami menggunakan FormData, yang membenarkan multipart/form-data permintaan.
3. Di sisi PHP, kami menerima canvasData melalui POST dan mengekstrak data imej sebenar.
4. Kami mencipta fail boleh tulis dan menulis data imej yang dikodkan base64 yang dinyahkodkan ke ia.

Petua:

• Pastikan '/path/to/file.png' mempunyai kebenaran menulis yang betul.
• Jika imej kelihatan rosak atau kosong, sahkan jenis data yang dihantar oleh fungsi JavaScript sepadan dengan jenis data yang dijangkakan dalam PHP skrip.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Imej Kanvas HTML5 ke Pelayan Menggunakan JavaScript dan PHP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!