How to Save an HTML5 Canvas Image to a Server?

Saving an HTML5 Canvas as an Image on a Server

Generative art projects often require the ability to save the created images to the server. Here are the steps involved:

1. Creating an Image on an HTML5 Canvas: Use a generative algorithm to create an image on an HTML5 Canvas.
2. Saving the Canvas as an Image to the Server: To save the canvas as an image, utilize JavaScript and PHP.

JavaScript Code:

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;
?>

Common Issues:

• Empty or Corrupted File: Ensure that the file path is writable and that the content type in the JavaScript request is set to "application/x-www-form-urlencoded."
• Base64 String: The console returns a large base64 string, which is not an image format.
• Wrong Content Type: The content type should be "image/png" when calling canvas.toDataURL().

Additional Tips:

• Cross-Origin Resource Sharing (CORS) may prevent the request from completing. Check your server settings.
• Use an image viewer to validate the saved file.

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