Bagaimana untuk Menyimpan Imej Kanvas HTML5 ke Pelayan?

Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan

Projek seni generatif selalunya memerlukan keupayaan untuk menyimpan imej yang dicipta ke pelayan. Berikut ialah langkah-langkah yang terlibat:

1. Mencipta Imej pada Kanvas HTML5: Gunakan algoritma generatif untuk mencipta imej pada Kanvas HTML5.
2. Menyimpan Kanvas sebagai Imej ke Pelayan: Untuk menyimpan kanvas sebagai imej, gunakan JavaScript dan PHP.

Kod JavaScript:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

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

PHP (testSave.php):

<?php
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

Biasa Isu:

• Fail Kosong atau Rosak: Pastikan laluan fail boleh ditulis dan jenis kandungan dalam permintaan JavaScript ditetapkan kepada "application/x-www -form-urlencoded."
• Rentetan Base64: Konsol mengembalikan satu besar rentetan base64, yang bukan format imej.
• Jenis Kandungan Salah: Jenis kandungan hendaklah "imej/png" semasa memanggil canvas.toDataURL().

Petua Tambahan:

• Cross-Origin Perkongsian Sumber (CORS) boleh menghalang permintaan daripada selesai. Semak tetapan pelayan anda.
• Gunakan pemapar imej untuk mengesahkan fail yang disimpan.

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