$5 correct answer - fabric.js with json export/import

kirkh34 · 10-12-2012, 08:44 PM

hello i am using the fabric.js framework with html5 canvas. i'm hoping someone can help me in here that has used this... this basically is an interactive canvas where you can add text, svgs - scale/resize/skew. what i'm doing is exporting the whole canvas into JSON and saving it in my DB. then i call the json back through a function. but it's not working right... the JSON holds the info on how to build the objects, boxes, rectangles, triangles, text... if i just have those objects then it builds it just fine... however when i export an SVG and try to call it (with or without other objects) it fails... the data is too long to be stored in json so fabric has you set a url to the saved svg on the server and just a "url" parameter. this is only for SVG (images) not for the other objects. so if i just have those..they work fine...but when i start using SVGs, it fails to import them back

Code:

<?php
session_start();

include_once ("/home/avid/public_html/includes/db_connect.php");

include_once ("/home/avid/public_html/includes/functions.php");

 ?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
   
   <script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
      
      
 <style type="text/css">
 div{
     width:200px;
 }
 </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
    <script type="text/javascript"> 
    $(document).ready(function() {
        
      var canvas = new fabric.Canvas('canvas');

    
    
      
 $("#clear").click(function() {
  // clear canvas
canvas.clear(); 
}); 


 $("#remove_selected").click(function() {
// remove currently selected object
canvas.remove(canvas.getActiveObject());
}); 


$("#add_text").click(function(){
   canvas.add(new fabric.Text('Hello Text!', { 
          fontFamily: 'Tahoma', 
          left: 400,
          top: 225,
          fontSize: 80,
          textAlign: "left",
          fill:"#FF0000"  // Set text color to red
      })); 
});


 $("#add_rect").click(function() {
// add red rectangle
canvas.add(new fabric.Rect({
width: 50,
height: 50,
left: 50,
top: 50,
fill: 'rgb(255,0,0)'
}));
}); 

 $("#add_circle").click(function() {
// add green, half-transparent circle
canvas.add(new fabric.Circle({
radius: 40,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5
}));
}); 


 $("#add_line").click(function() {
// add green, half-transparent circle
canvas.add(new fabric.Line({
radius: 40,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5
}));



}); 



     
          
var svgSrc = "cobra_snake_head.svg";

$("#loadSVG").click(function(){
    
    
    
     fabric.loadSVGFromURL(svgSrc, function (object) {
       var group = new fabric.PathGroup(object, { 
          left: 165, 
          top: 100, 
          width: 295, 
          height: 211,
          
           
        });                   
          

         //set source path for svg
         group.setSourcePath(svgSrc);    
         
        canvas.add(group);  
        canvas.renderAll(); 
});          

});


$("#exportSVG").click(function(){
    
    
    var json = JSON.stringify(canvas.toDatalessJSON());

$("body").append("<div>"+json+"</di>");
    
$.post('app_process.php',
        {
            uid : 1,
            img : canvas.toDataURL(),
            json : json,
            svg : canvas.toSVG()
        });
     
   
});


$("#exporntSVG").click(function(){
group.fillColor = "#FF0000";
canvas.renderAll(); 
});




$("#save").click(function(){
 
});


<!-- SVG (with text object) fails-->

    json = {"objects":[{"type":"text","left":400,"top":228,"width":383,"height":104,"fill":"#FF0000","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.15,"scaleY":1.15,"angle":2.65,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"text":"Hello Text!","fontSize":80,"fontWeight":100,"fontFamily":"Tahoma","fontStyle":"","lineHeight":1.3,"textDecoration":"","textShadow":"","textAlign":"left","path":null,"strokeStyle":"","backgroundColor":"","useNative":true},{"type":"path-group","left":386,"top":246,"width":295,"height":211,"fill":"","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":0.55,"scaleY":0.55,"angle":1,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"paths":"cobra_snake_head.svg","sourcePath":"cobra_snake_head.svg"}],"background":"rgba(0, 0, 0, 0)"};
  json = JSON.stringify(json);


$("#load").click(function(){
    
  
 
 canvas.loadFromJSON(json, function() {
  alert(' this is a callback. invoked when canvas is loaded! ');
});
    


});
        
});
   
    </script>
    
    
    <button id="add_text">Add Text</button>
    <button id="add_line">Add Line</button>
    <button id="add_rect">Add Rectangle</button>
    <button id="add_circle">Add Circle</button>
     <button id="loadSVG">Load SVG</button>
    <br /><br />
    <button id="clear">Clear</button>
    <button id="remove_selected">Remove Selected</button>
     <button id="exportSVG">Export SVG</button>
     
     
     
     <button id="save">Save State</button>
     <button id="load">Load State</button>
    
  </body>
</html>

if you look in the json var you see the object that would be coming from the database. if you take out the svg data and just leave the text data you would see that it builds it just fine. $5 to first correct answer via paypal

kirkh34 · 10-14-2012, 12:45 AM

errors solved: before I used canvas.loadFromJSON. because I used canvas.toDatalessJSON() to save it, i have to use loadFromDatalessJSON to retrieve it. if you weren't importing an svg through a URL then you could use toJSON() and loadFromJSON. i hope this helps someone with this same problem

Code:

 canvas.loadFromDatalessJSON(json, function() {
  alert(' this is a callback. invoked when canvas is loaded! ');
});