CODEWITHSUNDEEP
javascriptphphtmlkineticjs
Stum Siriprapasuk
Stum Siriprapasuk

Reputation: 5

How to save image on a Kineticjs canvas to database?

I have a canvas

function initStage(images) {

    var stage = new Kinetic.Stage({
        container: "container",
        width: 550,
        height: 550
    });

and Save Button

   $('#save').click( function() {

   stage.toDataURL(function(dataUrl) {
   $.ajax("ajax.php", { data: dataUrl },

    function(data) {
        alert("Your Design Was Saved To The Server");
    }); }); });

and ajax.php

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

How do I save dataURL to my Database ?

Upvotes: 0

Views: 354

Answers (2)

imelgrat
imelgrat

Reputation: 2577

You are now writing directly to the server's filesystem, always using 'image.png' as its name (I'm assuming this is a test site and not a production one).

If you wan to save the image contents into the DB, you have to:

  1. Create a database, using the DB engine you are going to use
  2. Create a table and add a BLOB type for storing the image's contents. You may also want to get an auto-incrementing ID field, so you can later retrieve the image by using its ID value. The actual table would look like this: CREATE TABLE image_table( ID INTEGER AUTO_INCREMENT, IMAGE BLOB, PRIMARY KEY (ID)) ENGINE=InnoDB;
  3. Connect to the DB using the credentials you are going to use
  4. Execute an INSERT SQL statement, passing the $_POST['data'] contents as parameter.

$connection = @mysqli_connect('database_hostname','database_username', 
               'database_password','database_databasename');
mysqli_query($connection ,"INSERT INTO image_table VALUES(NULL, '".
mysqli_real_escape_string($connection , $_POST['data']) ."')");

The call to mysqli_real_escape_string is necessary to correctly escape the data sent by the JS script, so that it won't cause trouble during the SQL query.

If you want to retrieve the image from the database, you'd have to use a SELECT type query, such as SELECT ID, IMAGE FROM image_table WHERE ID='".intval(ID)."';"

Once you get the image from the database, you can use something like this to send it to the browser:

//get the data from the database somehow (mysql query et al.)
//let's assume data retrieved from the DB is in $data
header('Content-Type: image/png');//alter for png/gif/etc.
echo $data['IMAGE'];

On the HTML page, you will use it like this

<img src="/myimagescript.php?id=ID">

Upvotes: 5

markE
markE

Reputation: 105015

You don't say which database you're using. Perhaps MySQL since you're using PHP?

Here's one starting example to save your dataUrl string to a MySQL database:

$conn = new PDO('mysql:host=myHost;dbname=myDatabase', "myUser", "myPassword");

// INSERT with named parameters
$stmt = $conn->prepare("INSERT INTO myTable(myImageColumnName)VALUES(:theImage)");
$stmt->bindValue(":theImage",$unencodedData);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;

Of course, all example my... must be replaced by your actual database values.

Upvotes: 1

Related Questions