Opslaan van image uit Canvas div
Ik was vandaag eens aan het spelen met een het maken van een online WhiteBoard: http://vandesteeg.org/
Nu vroeg ik mij af of het mogelijk is om het plaatje wat je maakt vervolgens op te slaan op mijn webhost. Dus met een form.
Iemand enig idee ?
Mvg, Bas
Gewijzigd op 11/01/2013 16:20:00 door No One
Heb het nu zo :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function UploadPic() {
// Generate the image data
var Pic = document.getElementById("canvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'save.php',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
</script>
function UploadPic() {
// Generate the image data
var Pic = document.getElementById("canvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'save.php',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
</script>
Save.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
if (array_key_exists('imageData',$_REQUEST)) {
$imgData = base64_decode($_REQUEST['imageData']);
// Path where the image is going to be saved
$filePath = 'images/';
// Delete previously uploaded image
if (file_exists($filePath)) { unlink($filePath); }
// Write $imgData into the image file
$file = fopen($filePath, 'w');
fwrite($file, $imgData);
fclose($file);
}
?>
if (array_key_exists('imageData',$_REQUEST)) {
$imgData = base64_decode($_REQUEST['imageData']);
// Path where the image is going to be saved
$filePath = 'images/';
// Delete previously uploaded image
if (file_exists($filePath)) { unlink($filePath); }
// Write $imgData into the image file
$file = fopen($filePath, 'w');
fwrite($file, $imgData);
fclose($file);
}
?>
Maar hij doet niks, en ik heb op google gezocht maar kan niks vinden, maybe weet jij nog wat ?
doe iets als file_put_contents('/tmp/'. $_REQUEST['id'].'.'.$base64decodedExtension, $base64_decodedstring);
Dus : Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") moet weg?
En ik moet in save.php : file_put_contents('/tmp/'. $_REQUEST['id'].'.'.$base64decodedExtension, $base64_decodedstring);
toevoegen. Maar waar ?
en op de plaats waar jij nu heel moeilijk doet met een file wegschrijven doe je nu file_put_contents(...);
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if (array_key_exists('imageData',$_REQUEST)) {
$imgData = base64_decode($_REQUEST['imageData']);
file_put_contents('/tmp/'. $_REQUEST['imageData'].'.'.$base64decodedExtension, $imgData);
}
?>
if (array_key_exists('imageData',$_REQUEST)) {
$imgData = base64_decode($_REQUEST['imageData']);
file_put_contents('/tmp/'. $_REQUEST['imageData'].'.'.$base64decodedExtension, $imgData);
}
?>
Begrijp alleen niet wat er met $base64decodedExtension moet gebeuren.