Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/" rel="nofollow">HERE</a> you can find a complete article on the subject. But here's the short version and source codes:</p> <p>First you need to convert the canvas binary data as a base 64 encoded string to send it to server:</p> <pre><code>var image = canvas.toDataURL("image/png"); </code></pre> <p>Send this with an ajax call:</p> <pre><code>var ajax = new XMLHttpRequest(); ajax.open("POST",'save.php', false); ajax.setRequestHeader('Content-Type', 'application/upload'); ajax.send(image); </code></pre> <p>Finally the PHP script save.php looks like this:</p> <pre><code>&lt;?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 ); } ?&gt; </code></pre> <p>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 <a href="http://en.wikipedia.org/wiki/Base64" rel="nofollow">THIS</a> Wikipedia article.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload