Soy nuevo en Fabric.js y he podido crear una aplicación en PHP/MYSQL que carga imágenes preseleccionadas en un lienzo predefinido. Funciona bien y el usuario puede moverse por las imágenes que seleccionó dentro del lienzo. Necesito una forma para que guarden su "proyecto" para que una vez que cierren y vuelvan a abrir su proyecto. Todo está exactamente donde los dejaron. Me imagino que necesito capturar los detalles de ancho, alto, izquierdo y superior de cada objeto y guardarlos en una tabla en formato json para que cargue los elementos tal como estaban.
Realmente no sé cómo hacerlo. Aquí hay un fragmento de mi código. 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>
Tenga en cuenta que el ancho y la altura del lienzo ya están predefinidos con PHP. Estoy usando PHP para recorrer las imágenes de ese proyecto en particular. Las imágenes aparecen correctamente en el lienzo y se pueden mover. Así que ahora me gustaría poder:
1- Carga dinámicamente el ancho, el alto, la izquierda y la parte superior de cada imagen
2- Capture el nuevo ancho, alto, izquierda y arriba si el usuario mueve la imagen en el lienzo y guárdelo en la tabla mysql
3 - Guarde todo el lienzo como una imagen con las nuevas coordenadas.
Cualquier ayuda será apreciada. No soy muy bueno con JavaScript.