John Davidson

Message:

I'm new to Fabric.js and I've been able to create an application in PHP/MYSQL that loads preselected images into a predefined canvas. It works well and the user is able to move around the images they selected within the canvas.
I need a way for them to save their "project" so that once they close and come back to open their project. Everything is exactly where they left them.
I imagine I need to capture the width, height, left, top details of each object and save them in a table in json format so that it loads the items as they were.

I really don't know how to go about it. Here's a snippet of my code.
HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>



<canvas id="canvas"> </canvas>



<script>

   

   

      // Initiate a Canvas instance and add backgroundColor

      var canvas = new fabric.Canvas('canvas', {

         backgroundColor: '#fff'

      });

      



      <?php



$query = "SELECT * FROM products p, project_letters l WHERE l.product_id =p.product_id and l.project_id = $p ORDER BY l.letter DESC";

$mres = mysqli_query($Connection, $query);

$NumOfimages = mysqli_num_rows($mres);



if ($NumOfimages > 0) {

    while ($row= mysqli_fetch_array($mres)) {

?>

function addImage<?php echo $row['pl_id']; ?> () {

    fabric.Image.fromURL('images/products/<?php echo $row['image']; ?>', function (img) {

        img.scale(0.1).set('flipX', false);

        canvas.add (img);

    }, {

    left: 10,

    top: 10

});

}



addImage<?php echo $row['pl_id']; ?>();



<?php }}?>

      canvas.setWidth(<?php echo $WIDTH ?>);

      canvas.setHeight(<?php echo $HEIGHT ?>);

      

      var link = document.createElement('a');

    link.innerHTML = 'Export as image';

link.addEventListener('click', function(ev) {

    link.href = canvas.toDataURL();

    link.download = "<?php echo $project['project_title'] ?>.png";

}, false);

document.body.appendChild(link);

      

</script>

Please note the width and height of the canvas are already predefined with PHP.
I'm using PHP to loop through the images for that particular project. The images appear successfully on the canvas and can be moved. So now I'd like to be able to:

1- Dynamically load the width, height, left and top of every image

2- Capture the new width, height, left and top if the user moves the image on the canvas and save it to mysql table

3 - Save the entire canvas as an image with the new coordinates.

Any help will be appreciated. I'm not very good with JavaScript.

---

My Answer:
To save the details of the fabric.js images to MySQL and PHP, you can follow these steps:

1. Capture the width, height, left, and top details of each object:
You can access these properties of each fabric.js object by using the `get` method. For example, to get the left and top position of an object named `obj`, you can use `obj.get('left')` and `obj.get('top')`.

2. Save the details to MySQL table in JSON format:
You can create a JSON object containing the details of each fabric.js object and then save this JSON object to your MySQL table. You can use PHP to encode the JSON object and save it to the database.

3. Update the details if the user moves the image:
You can listen for the `object:modified` event on the canvas to detect when an object is moved. Then, you can update the details of the moved object in your MySQL table.

4. Save the entire canvas as an image with the new coordinates:
You can use the `toDataURL` method of the canvas to export the canvas as an image. You can then save this image to your server or display it to the user.

Here's an example of how you can capture the details of each fabric.js object and save them to MySQL in JSON format:

javascript
// Save the details of each object to MySQL in JSON format
function saveCanvasDetails() {
var objects = canvas.getObjects();
var objectsDetails = [];

objects.forEach(function(obj) {
var objDetails = {
width: obj.get('width'),
height: obj.get('height'),
left: obj.get('left'),
top: obj.get('top')
};
objectsDetails.push(objDetails);
});

// Convert objectsDetails to JSON string
var objectsJSON = JSON.stringify(objectsDetails);

// Send objectsJSON to PHP using AJAX to save to MySQL
$.ajax({
type: 'POST',
url: 'save_canvas_details.php',
data: { objectsJSON: objectsJSON },
success: function(response) {
console.log('Canvas details saved to MySQL');
}
});
}


In your PHP file `save_canvas_details.php`, you can decode the JSON string and save the details to your MySQL table:

php
// Get the JSON string from POST data
$objectsJSON = $_POST['objectsJSON'];

// Decode the JSON string to an array
$objectsDetails = json_decode($objectsJSON, true);

// Save the details to MySQL table
// You can loop through $objectsDetails and save each object's details to your MySQL table
?>


You can call the `saveCanvasDetails` function when the user clicks a save button or when they close the application to save their project details.