When Convert Canvas To Svg Need Only Cropped Content

I am using the HTML5 CANVAS with fabric js. Finally will be converted it into SVG.we can upload images and crop into circle,rectangle,.. .The image also being cropped and added tex

Solution 1:

I looked through the fabric documentation and could not find any methods for carrying over the canvas's clipTo property to the generated SVG. So I think the best (only) way to crop the SVG image to a circle, is to insert some additional SVG elements into it. Rather than explaining piece by piece, I'll just paste some commented JS code I came up with for this.

$(function(){
  var canvas = new fabric.Canvas('Canvas',{backgroundColor: '#ffffff',preserveObjectStacking: true});
  canvas.clipTo = function (ctx) {
    ctx.arc(250, 300, 200, 0, Math.PI*2, true);
  };
  
  // Using a JQuery deferred object as a promise.  This is used to// synchronize execution, so that the SVG is never created before// the image is added to the canvas.var dImageLoaded = $.Deferred();
  
  fabric.Image.fromURL('https://fabric-canvas.s3.amazonaws.com/Tulips.jpg', function(oImg) {
    // Insert the image object below any existing objects, so that// they appear on top of it.  Then resolve the deferred.
    canvas.insertAt(oImg, 0);
    dImageLoaded.resolve();
  });
  
  canvas.add(new fabric.IText('Welcome ', {
    left : fabric.util.getRandomInt(50,50),
    top:fabric.util.getRandomInt(430, 430)
  }));
  
  canvas.renderAll();
  
  
  $('#tosvg_').on('click',function(){
    // Wait for the deferred to be resolved.
    dImageLoaded.then(function () {
      // Get the SVG string from the canvas.var svgString = canvas.toSVG({
        viewBox: {
          x: 50,
          y: 100,
          width: 400,
          height: 400,
        },
        width: 400,
        height: 400,
      });
      
      // SVG content is not HTML, nor even standard XML, so doing// $(svgString) might mutilate it.  Therefore, even though we// will be modifying the SVG before displaying it, we need to// insert it straight into the DOM before we can get a JQuery// selector to it.// The plan is to hide the svgcontent div, append the SVG,// modify it, and then show the svcontent div, to prevent the// user from seeing half-baked SVG.var $svgcontent = $('#svgcontent').hide().html(svgString);
      var $svg = $svgcontent.find('svg');
      
      // Create some SVG elements to represent the clip path, and// append them to $svg.  To create SVG elements, we need to use// document.createElementNS, not document.createElement, which// is also what $('<clipPath>') and $('<circle>') would call.var $clipPath = $(document.createElementNS('http://www.w3.org/2000/svg', 'clipPath'))
          .attr('id', 'clipCircle')
          .appendTo($svg);
      var $circle = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle'))
          .attr('r', 200)
          .attr('cx', 250)
          .attr('cy', 300)
          .appendTo($clipPath);
      
      // This part is brittle, since it blindly writes to the// transform attributes of the image and text SVG elements.// SVG clip paths clip content relative to the pre-transformed// coordinates of the element.  The canvas.toSVG method places// the image and the text each inside of group elements, and// transforms the group elements.  It does not transform the// image and text.  Because transforms work equally well on// image and text as on groups, we move the transform attribute// from the two groups to their contents.  Then, we can use the// same clip-path on all groups.// If the contents of the groups already had transforms, we// would need to create multiple clip paths - one for each group// - based on the groups' transforms.
      $svg.find('g').each(function () {
        var $g = $(this);
        // Move transform attribute from group to its children, and// give the group a clip-path attribute.
        $g.children().attr('transform', $g.attr('transform'));
        $g.removeAttr('transform').attr('clip-path', 'url(#clipCircle)');
      });
      $('#svgcontent').show();
    });
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.js"></script><divclass="container"><divid='canvascontain'width='1140'height='600'style='left:0px;background-color:rgb(240,240,240)'><canvasid="Canvas"width='1140'height='600'></canvas></div><inputtype='button'id='tosvg_'value='create SVG'><divid='svgcontent'></div></div>

I noticed that part of the Welcome text gets clipped, but I'll leave it to you to move that.