0

i have done a very simple painting app in canvas and now I have tried to figure out how to save the canvas (as image) and then upload it to a sql database (by using php and jquery and javascript). I have read many google pages about how to do it but i couldent really understand how to do it fully.

what i have come up with is that i think this is the code i need to make the canvas into a image.

var c=document.getElementById("myCanvas");    
var myImage = c.toDataURL("image/png");
    var image = document.getElementById("myCanvas");
    image.src = myImage;

after this is done i have to send the image, i would like to use ajax to send the image to a new file called action. But the problem is that i dont know what i should have as data.

      $.ajax({
            type: "POST",
            url: "action.php",
            data: ??????????,
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
        });

after i have send it to the action file i have to upload the image to the database. when i was searching i found something called blob and base64 but dident really understand how to use them.

As i can see it there is threee problems: 1. save the canvas into a image (i am not sure if my code is correct) 2. send the image via ajax to a action file (main problem is to know what data type to send) 3. from this file then send the image to the database, here i have no ide more then how to send standard stuff like CRUD (creat, read, update , delete). for example:

 $sql = "INSERT INTO `div`(`ID`, `name`,) 
VALUES( 'ID' ,' " . $_POST["name"] . "')";

but what i have read from the internet, is not nearly like this simple insert commando.

i am used to php javascript and jquery. So it would be simpeler for me to understand if i got it in a language i can read

Robin Andersson
  • 87
  • 2
  • 11
  • Hope this helps: http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/ – HC_ Dec 30 '13 at 19:17

1 Answers1

0

First:

You need to make that canvas a image(canvas.toDataURL('canvasid')) then convert it into a octet-stream with replace

      var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
//ajax call   
 $.ajax({
        url: "action.php",
       type: 'POST',
       contentType: 'application/octet-stream',  
       data: image,
       processData: false
    });

This will throw that octet stream in action.php. Now you can save this stream in mysql. Like the strings (with varchar) you can save on mysql, you can use datatype blob for saving files. Also you can save it like a file on the server. Secondly:

To save that image in php you will need imagecreatefromstring function. Use it in action.php like this:

$image = imagecreatefromstring( $data );

This may be quite similar problem with yours: PHP create image from application/octet stream

Community
  • 1
  • 1
Gun2sh
  • 870
  • 12
  • 22
  • i did the change as you help me with. But when i tried to send the information to a database, called images i typed this: `$sql = "INSERT INTO 'images' ('image') VALUES (".$_POST["image"].")"; $stmt = $dbh->prepare($sql); $stmt->execute();` and the database only containe 1 thing. And thats image. And the type is blob. – Robin Andersson Dec 30 '13 at 21:43
  • and what happened?see this for blob insertion(http://www.phpeveryday.com/articles/PDO-Working-With-BLOBs-P554.html)) Also why dont you save that stream itself on the database? But saving image is a bad idea in db as far as I know,see this:http://stackoverflow.com/a/17751976/1363495. Accept my previous answer? – Gun2sh Dec 30 '13 at 21:54
  • The dataURL from even small canvases are rather large so instead of bloating the database with the actual data you might consider: (1) storing the uploaded image to a server directory and (2) saving the filepath to the image in your MySQL database. Your DBA will thank you for doing it this way! – markE Dec 30 '13 at 23:57