CODEWITHSUNDEEP
javascriptcanvasfabricjsfabricjs2
Robert Godino
Robert Godino

Reputation: 41

FabricJS - Ability to output (to PNG) a small section of canvas, not entire canvas

I would really appreciate some feedback and help with FabricJS.

I have a 500 x 500px pixel bounding area (defined by dashed line) within a larger 600 x 600px canvas.

However, I only want to output to PNG the small section within the dashed area, not the entire canvas. This is important, as the user should be able to change the bounding area size for their output (e.g. Facebook ad size [1200px], Business card size [???px] etc) BUT the canvas size would remain the same.

On output, I only need a PNG of the smaller bounded area.

Is this possible with FabricJS?

I have sourced a fiddle to show you what I mean: http://jsfiddle.net/prabhath/92jy8q52/

canvas.setBackgroundImage(clipingRect);

My other thought was to create a smaller canvas within a larger canvas but from what I’ve seen online, the bounding controls aren’t visible on areas outside the canvas. I’m yet to explore inner/outer canvas but unsure whether that would meet my needs.

Thanks in advance.

Upvotes: 1

Views: 767

Answers (2)

Robert Godino
Robert Godino

Reputation: 41

Thanks @Durga, that worked well.

I adjusted the code a bit to meet my needs. Here’s my final function:

$scope.saveCanvas2ClippedPNG = function(multiplier) {

  var clipdCanvas = canvas.toDataURL({
    multiplier: multiplier,
    format: 'png',
    left: 100,     //clipingRect.left
    top: 100,      //clipingRect.top
    width: 1000,   //clipingRect.width
    height: 428    //clipingRect.height
  });

  var byteString = atob(clipdCanvas.split(',')[1]);
  var mimeString = clipdCanvas.split(',')[0].split(':')[1].split(';')[0]
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  var blob = new Blob([ab], {type: mimeString});

  saveAs(blob, "robClipdImage.png");

};

Upvotes: 0

Durga
Durga

Reputation: 15604

canvas.toDataURL({
  left: clipingRect.left,
  top: clipingRect.top,
  width: clipingRect.width,
  height: clipingRect.height
});

You can use canvas.toDataURL() with options to get a section of canvas.

Upvotes: 1

Related Questions