Send image from browser to server - possible?

Question

There's an image gallery site, and the user can manipulate the images via javascript and HTML5 canvas. Is it possible to send back the manipulated image to the server for storing with PHP?

Answer 1

HERE you can find a complete article on the subject. But here's the short version and source codes:

First you need to convert the canvas binary data as a base 64 encoded string to send it to server:

var image = canvas.toDataURL("image/png");

Send this with an ajax call:

var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php', false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(image);

Finally the PHP script save.php looks like this:

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type
    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    // Need to decode before saving since the data we received is already base64 encoded
    $unencodedData=base64_decode($filteredData);

    //echo "unencodedData".$unencodedData;

    // Save file.  This example uses a hard coded filename for testing,
    // but a real application can specify filename in POST variable
    $fp = fopen( 'test.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}
?>

The PHP script parses the raw post data, converts from base 64 to binary, and saves to a file. For more information on Base 64 check out THIS Wikipedia article.