Bagaimana untuk Menyimpan Imej Kanvas HTML5 ke Pelayan untuk Diproses?

Cara Menyimpan Kanvas HTML5 sebagai Imej pada Pelayan untuk Pemprosesan Imej

Dalam aplikasi pemprosesan imej, pengguna selalunya perlu menyimpan menjana imej daripada kanvas HTML5 ke pelayan. Berikut ialah panduan komprehensif untuk mencapai fungsi ini:

Langkah 1: Melukis pada Kanvas

Mula-mula, lukis imej yang diingini pada kanvas HTML5. Rujuk coretan kod yang disediakan untuk contoh penciptaan bentuk dan pemaparan.

Langkah 2: Menukar Kanvas kepada Data

Untuk menyimpan kanvas sebagai imej, gunakan kaedah toDataURL(), yang menukarkan kanvas menjadi rentetan yang mewakili data imej. Rentetan ini termasuk data imej yang dikodkan dalam Base64.

Langkah 3: Menghantar Data ke Pelayan

Untuk menghantar data imej ke pelayan, gunakan XMLHttpRequest (AJAX ) permintaan. Kod JavaScript berikut menunjukkan proses ini:

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

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

Langkah 4: Pemprosesan Bahagian Pelayan

Pada pelayan, gunakan PHP untuk menerima data imej dan simpannya sebagai imej. Berikut ialah contoh kod PHP:

<?php
if (isset($_POST['imgData'])) {
  $imageData = $_POST['imgData'];
  $uri = substr($imageData, strpos($imageData, ",") + 1);

  file_put_contents('file.png', base64_decode($uri));
}
?>

Dalam kod PHP ini, data imej ditapis untuk mengalih keluar bahagian yang tidak diperlukan dan kemudian dinyahkod daripada Base64. Ia kemudiannya disimpan sebagai fail PNG pada pelayan.

Nota Tambahan:

• Pastikan laluan pelayan untuk menyimpan imej boleh ditulis.
• Jika anda menemui imej rosak, cuba laraskan jenis kandungan dalam permintaan AJAX untuk "application/x-www-form-urlencoded" atau "application/upload".
• Untuk menyelesaikan sebarang isu, semak log pelayan atau konsol penyemak imbas untuk mengesan mesej ralat.

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