[HTML] fabricJs, the canvas library

1. Why the fabric.js? is the nom nom snack?

: Canvas is the powerful element on html5. but this is a little bit... fussy to use. we need to calculate x, y, width, height, and whatever on the canvas. So It is more good to our mental health to put a library like fabricJs onto the canvas.

2. Start with chewing fabricJs

(javascript)

(function() {
  var canvas2dBackend = new fabric.Canvas2dFilterBackend();
  var canvas = this.__canvas = new fabric.Canvas('c');
  var f = fabric.Image.filters;
 
  //Padding top, left, right, bottom from image.
  fabric.Object.prototype.padding = 5;

  //Make transparent the corners can resize the image.
  fabric.Object.prototype.transparentCorners = false;

  //Apply filter with canvas2d way.
  fabric.filterBackend = canvas2dBackend;
 
  //Set image from url(or directory path) and callback function.
  fabric.Image.fromURL('http://i.imgur.com/jZsNUCi.jpg', function(img) {
    img.scale(0.2).set({
      name: 'main'
      , left: canvas.width / 2 - (img.width / 8)
      , top: canvas.height / 2 - (img.height / 8)
    });
    canvas.add(img);
  });
})();

(html)

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  <style>
    body { margin:0; padding:0; overflow:scroll; background-color:#F0F0F0; }
    .canvas-container { display: inline-block; vertical-align: top; }
    .c-box { border:1px sold #aaa; }
  </style>
</head>
<body>
   <canvas class="c-box" id="c" width="1400" height="850"></canvas>
</body>
</html>

3. More yummy function? HERE YOU ARE!

-watermark (In fact, more like image blending by grouping)

//Get the image, not a watermark image
function getImageObject() {
  var activeObj = canvas.getActiveObject();
  var imageName = null;
  var returnObj = null;
  
  canvas.getObjects().map(function(obj){
    imageName = obj.name || "";
    if(obj.isType("image") && imageName != "watermark") {
      returnObj = obj;
    }
  });
    
  return returnObj;
}

//Get the watermark image
function getWatermarkObject(){
  var imgObj = null;
   
  canvas.getObjects().map(function(obj){
    if(obj.name == "watermark"){
      imgObj = obj;
    }
  });
   
  return imgObj;
}

function insertWatermarkImage() {
  var watermark = new Image();

  canvas.remove(getWatermarkObject());

  //Set the image with url source or directory path
  watermark.src = 'https://rawgit.com/kangax/fabric.js/master/dist/fabric.js';
  watermark.onload = function() {
    var imgInstance = new fabric.Image(this, {
    name : "watermark",
    hasControls : true,
    lockMovementX : false,
    lockMovementY : false
  });
   
  var activeObj = getImageObject();
  var imageTop = activeObj.top < 0 ? 0 : activeObj.top;
  var imageLeft = activeObj.left < 0 ? 0 : activeObj.left;
  var imageWidth = activeObj.width;
  var imageHeight = activeObj.height;
    
  imgInstance.set({
    top : imageTop,
    left : imageLeft,
    scaleX: 0.1,
    scaleY: 0.1,
    opacity: 0.5
  });
  
  //Set this imageInstance to active object on the current canvas.
  canvas.add(imgInstance).setActiveObject(imgInstance);

  //Need to call this function after all canvas changing.
  canvas.renderAll();
  }
}

function grouping(){
  var objs = [];
  var groupObj = null;
   
  //Put all objects into the array.
  objs = canvas._objects.filter(function(obj){
    return obj;
  });
   
  //Clear canvas.
  canvas.clear();
   
  //Grouping.
  groupObj = new fabric.Group(objs,{});

  //Transfer this group to new fabric image.
  groupObj.cloneAsImage(function(o) {
    canvas.add(o);
    o.center();
    o.setCoords();
  });
   
  canvas.renderAll();
}

- Variable filters

function getFilter(index) {
  var obj = canvas.getActiveObject() || getImageObject();

  return obj.filters[index];
}

function applyFilter(index, filter) {
  var obj = canvas.getActiveObject() || getImageObject();

  obj.filters[index] = filter;
  obj.applyFilters();
  canvas.renderAll();
}

function applyFilterValue(index, prop, value) {
  var obj = canvas.getActiveObject() || getImageObject();
  
  if (obj.filters[index]) {
    obj.filters[index][prop] = value;
    obj.applyFilters();
    canvas.renderAll();
  }
}

var $ = function(id){return document.getElementById(id)};

$('brightness').onclick = function () {
  applyFilter(5, this.checked && new f.Brightness({
    brightness: parseFloat($('#brightness-value').val())
  }));
};
  
$('brightness-value').oninput = function() {
  applyFilterValue(5, 'brightness', parseFloat(this.value));
};

$('contrast').onclick = function () {
  applyFilter(6, this.checked && new f.Contrast({
    contrast: parseFloat($('contrast-value').value)
  }));
};

...

- Check here if you want to know more information about fabric filter
http://fabricjs.com/image-filters

ROOMY - NATION

2017. 8. 29.