1

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.

Robert Godino
  • 41
  • 6

2 Answers2

1
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.

Durga
  • 15,263
  • 2
  • 28
  • 52
  • Thanks Durga, that’s really helpful. I’m using toBlob canvas to export to PNG, e.g. `$scope.saveCanvas2PNG = function() { $("#canvas").get(0).toBlob(function(blob){ // "FileSaver.js" saves blob object as image saveAs(blob, "robImage.png"); }); };` How does the "canvas.toDataURL" interact with toBlob? I mean to ask how would I include the "canvas.toDataURL" statement in my toBlob code? Or should I say, should I even be using toBlob? Is toBlob superseded now? – Robert Godino Jun 07 '18 at 12:57
  • @RobertGodino check [this](https://stackoverflow.com/a/46406124/3551786) – Durga Jun 07 '18 at 13:05
0

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");

};
Robert Godino
  • 41
  • 6