Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by kirkh34; 10-12-2012 at 10:26 PM.

  • #2
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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! ');
    });


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •