how can we save html5 canvas image to database in php

Question

I m creating product design page for e-commerce web site... I need to save designed image from client side to database.... I tried to save but it could'nt save...and html5 canvas is new for me...

My html code.. ...................

<div id="clothing-designer">
                        <div class="fpd-product" title="Shirt Front" data-thumbnail="images/yellow_shirt/front/preview.png">
                            <img src="./images/yellow_shirt/front/base.png" title="Base Front" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
                            <img src="./images/yellow_shirt/front/body.png" title="Hightlights" data-parameters='{"x": 249, "y": 80}' />
                            <img src="./images/yellow_shirt/front/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
                            <span title="Any Text" data-parameters='{"x": 243, "y": 181, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000"}'>Default Text</span>
                            <div class="fpd-product" title="Shirt Back" data-thumbnail="images/yellow_shirt/back/preview.png">
                                <img src="./images/yellow_shirt/back/base.png" title="Base Back" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
                                <img src="./images/yellow_shirt/back/body.png" title="Hightlights" data-parameters='{"x": 277, "y": 79}' />
                                <img src="./images/yellow_shirt/back/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
                            </div>
                        </div>

score 4 · Answer 1 · answered Jul 04 '14 at 15:20

You give little info, but here is a brief overview of the process you will need.

A full description of how to get design info from the client to your database is beyond the scope of a Stackoverflow discussion, but this example should get you started with the concepts involved.

Convert the canvas to an imageUrl

If you want to save the canvas content as an image you can use canvas.toDataURL() which returns a DataURL of the canvas in .png format. For example:

var canvas=document.getElementById("myCanvas");
var dataUrl=canvas.toDataURL();

Send that dataUrl back to your server with an AJAX post

$.ajax({
  type: "POST",
  url: "http://localhost/saveCanvasDataUrl.php",
  data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})

On the PHP side, save the incoming dataURL to a database:

<?php

    if(!isset($_POST["code"])){
        die("Post was empty.");
    }

    $sql="insert into designs(image) values(:image)";

    // INSERT with named parameters
    $conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
    $stmt = $conn->prepare($sql);
    $stmt->bindValue(":image",$_POST["image"]);
    $stmt->execute();
    $affected_rows = $stmt->rowCount();
    echo $affected_rows;

?>

Alternatively...

With this all said, it might be more useful to save the components of the design that the user created rather than an image of that design.

Create a javascript object containing the specific info about the design:

var item1={
    product:"shirt",
    color:"#d59211",
    price:20,
    text:"Default Text",
    textX:243,
    textY:181
}

Use JSON to convert that object into a string

var item1Json=JSON.stringify(item1);

Then post that useful design data to your database instead of the image.

When do I need to call the Ajax and PHP to make this work? – Wizzardzz Apr 25 '19 at 14:55 — Wizzardzz, Apr 25 '19 at 14:55

score 0 · Answer 2 · answered Jul 04 '14 at 15:25

You can use HTML5 Canvas' toDataURL() which according to the docs:

Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG)

It is used like this:

var canvas = document.getElementById('thecanvaselement');
// ...maybe some more canvas drawing operations here
var url = canvas.toDataURL();

The results (stored in the url variable) can then be sent back to the server using AJAX and then saved to your database like you would normally do.

how can we save html5 canvas image to database in php

2 Answers2

Linked