How to save an HTML5 Canvas as an image on a server?

Question

I\'m working on a generative art project where I would like to allow users to save the resulting images from an algorithm. The general idea is:

• Create an image

Answer 1

Here is an example of how to achieve what you need:

1. Draw something (taken from canvas tutorial)

2. Convert canvas image to URL format (base64)

   var dataURL = canvas.toDataURL();

3. Send it to your server via Ajax

    $.ajax({
      type: "POST",
      url: "script.php",
      data: { 
         imgBase64: dataURL
      }
    }).done(function(o) {
      console.log('saved'); 
      // If you want the file to be visible in the browser 
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved 
      // and than put the image in your browser.
    });

3. Save base64 on your server as an image (here is how to do this in PHP, the same ideas is in every language. Server side in PHP can be found here):