• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

408
Views
¿Cómo guardo los detalles de la(s) imagen(es) de fabric.js en mysql y php?

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.

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error