Geek asks and answers

Loading canvas context as image using ajax and php

I have a canvas and I want to upload the canvas context to the server using ajax and php. I want the final result to be an image stored on the server. I did the image upload using the form. But now I want the canvas context to convert it to an image and upload it to the server!

So how can I do this? Any suggestions, algos or solutions appreciated!

+5
source share
1 answer

This blog post accurately describes how to save canvases to the server using AJAX requests, I think this should be suitable for you.

var canvasData = testCanvas.toDataURL("image/png"); JavaScript. Base64 , : data:image/png;base64,fooooooooooobaaaaaaaaaaar==.

, AJAX HTML:

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

PHP script HTTP_RAW_POST_DATA $GLOBALS, , .

// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);

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

$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $decodedData);
fclose( $fp );

, test.png - , . data:image/png;base64, , base64_decode(). ($decodedData) .

+11

More articles:


All Articles