Opslaan van image uit Canvas div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bas  van de Steeg

Bas van de Steeg

11/01/2013 16:07:44
Quote Anchor link
Hallo mensen,

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
 
PHP hulp

PHP hulp

29/03/2024 14:40:39
 
No One

No One

11/01/2013 16:19:01
Quote Anchor link
canvas.toDataURL(); (canvas is het object, de variabele van jouw div) dat wordt dan een base64 encoded string...dusals je het dan als img op wil slaan kun je het bestand met base64_decode decoderen en dan opslaan als bestand
Gewijzigd op 11/01/2013 16:20:00 door No One
 
Bas  van de Steeg

Bas van de Steeg

11/01/2013 16:34:59
Quote Anchor link
Oke,
Heb het nu zo :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

Save.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
  }

?>

Maar hij doet niks, en ik heb op google gezocht maar kan niks vinden, maybe weet jij nog wat ?
 
No One

No One

11/01/2013 16:41:58
Quote Anchor link
waarom zou je in javascript de data:image gedeelte er afgooien?? doet dat serverside...dan kun je daarmee weten wat je aan het opslaan bent en hoe het bestand moet heten (welke extensie etc) ;)

doe iets als file_put_contents('/tmp/'. $_REQUEST['id'].'.'.$base64decodedExtension, $base64_decodedstring);
 
Bas  van de Steeg

Bas van de Steeg

11/01/2013 16:52:35
Quote Anchor link
Wacht, volgens mij ben ik het een beetje kwijt en haal alles door elkaar.
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 ?
 
No One

No One

11/01/2013 16:59:30
Quote Anchor link
ja die kan weg...en dan ga je in php dat geheel parsen...dan weet je welke extensie je hebt...

en op de plaats waar jij nu heel moeilijk doet met een file wegschrijven doe je nu file_put_contents(...);
 
Bas  van de Steeg

Bas van de Steeg

11/01/2013 17:12:33
Quote Anchor link
Oke, ik heb nu het volgende in save.php :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);

  }

?>

Begrijp alleen niet wat er met $base64decodedExtension moet gebeuren.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.