How to Save an HTML5 Canvas Image to a Server Using JavaScript and PHP?

How to Save an HTML5 Canvas as an Image on a Server

In your quest to allow users to save images generated from an HTML5 canvas, you encountered difficulties. To resolve this, here's an improved approach:

JavaScript Code:

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

PHP Code (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);
}

Breakdown:

1. We gather the canvas data in the JavaScript function.
2. Instead of using a direct XHR request, we utilize FormData, which allows multipart/form-data requests.
3. On the PHP side, we accept the canvasData via POST and extract the actual image data.
4. We create a writeable file and write the decoded base64-encoded image data to it.

Tips:

• Ensure the '/path/to/file.png' has proper write permissions.
• If the image appears corrupted or empty, verify the data type being sent by the JavaScript function matches the expected data type in the PHP script.

The above is the detailed content of How to Save an HTML5 Canvas Image to a Server Using JavaScript and PHP?. For more information, please follow other related articles on the PHP Chinese website!