Bagaimanakah Saya Boleh Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan?

Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan

Untuk menyimpan kanvas HTML5 sebagai imej pada pelayan, ikut langkah berikut:

1. Tukar Kanvas kepada URL Data Imej

var canvasData = canvas.toDataURL("image/png");

2. Cipta Objek XMLHttpRequest

var ajax = new XMLHttpRequest();

3. Buka POST Request dan Set Request Header

ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4. Hantar Data Kanvas

ajax.send("imgData=" + canvasData);

5. Mengendalikan Respons

ajax.onreadystatechange = function() {
  console.log(ajax.responseText);
}

6. Pada Pelayan PHP

Terima data kanvas dan tuliskannya ke pelayan sebagai fail PNG:

<?php
if (!empty($_POST['imgData'])) {
  // Convert base64 data to raw data
  $imgData = base64_decode($_POST['imgData']);

  // Set path and open file
  $fp = fopen('/path/to/file.png', 'wb');

  // Write raw data to file and close
  fwrite($fp, $imgData);
  fclose($fp);
}
?>

Nota Tambahan:

• Ganti /path/to/file.png dengan fail yang anda inginkan laluan.
• Pastikan direktori pelayan boleh ditulis.
• Pengepala permintaan AJAX juga boleh ditetapkan kepada multipart/form-data jika perlu.
• Jika URL data imej mengandungi aksara bukan standard, gunakan encodeURIComponent() untuk melepaskannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!