Fabric.js - Dynamic Crop Area with a rectangle
<p>I want to make and dynamic crop area and found <a href="https://stackoverflow.com/questions/22260287/fabric-js-clipping-individual-objects-dynamically">this</a> snippet. It works perfect in normal usage, but when you scaled the original object before making the crop area, the crop zone seems not in the right position. Can you look into this <a href="http://codepen.io/wushan/pen/wzvAZX?editors=0011" rel="nofollow noreferrer">pen</a> for some help ?</p>

<pre><code>var canvas = new fabric.CanvasEx('canvas');
var el;
var object, lastActive, object1, object2;
var cntObj = 0;
var selection_object_left = 0;
var selection_object_top = 0;

var src = "http://fabricjs.com/lib/pug.jpg";

fabric.Image.fromURL('https://omicron.aeon.co/images/08e7f2bb-f2ce-4058-a955-1c8d594468a2/card_SIZED-Aleksandr-Zykov-4975950437_b84f9f9ef8_o.jpg', function (oImg) {
    oImg.top = canvas.getHeight()/2 - oImg.getHeight()/2;
    oImg.left = canvas.getWidth()/2 - oImg.getWidth()/2;
    canvas.add(oImg);
    bindCropEvent(oImg);
  });
canvas.renderAll();

function bindCropEvent(obj){
  obj.on('object:dblclick', function(){
    CropMode();
  }); 
};

function CropMode() {
    canvas.remove(el);
    if (canvas.getActiveObject()) {
        object = canvas.getActiveObject();
        if (lastActive !== object) {
            console.log('different object');
        } else {
            console.log('same object');
        }
        if (lastActive &amp;&amp; lastActive !== object) {
            //lastActive.clipTo = null; results in clip loss
        }
        el = new fabric.Rect({
            fill: 'rgba(0,0,0,0.6)',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            strokeDashArray: [2, 2],
            opacity: 1,
            width: 1,
            height: 1,
            borderColor: 'red',
            cornerColor: 'red',
            hasRotatingPoint: false
        });

        el.left = canvas.getActiveObject().left;

        selection_object_left = canvas.getActiveObject().left;
        selection_object_top = canvas.getActiveObject().top;

        el.top = canvas.getActiveObject().top;

        el.width = canvas.getActiveObject().width * canvas.getActiveObject().scaleX;
        el.height = canvas.getActiveObject().height * canvas.getActiveObject().scaleY;

        //插入
        canvas.add(el);
        canvas.setActiveObject(el);
        el.on('deselected', function(){
          console.log('des');
          doCrop();
        });

    } else {
        alert("Please select an object or layer");
    }
}

function doCrop() {

    var eLeft = el.get('left');
    var eTop = el.get('top');
    var left = eLeft - object.left;
    var top = eTop - object.top;
    console.log(left, top);

    left *= 1;
    top *= 1;
    console.log(left, top);

    var eWidth = el.get('width');
    var eHeight = el.get('height');

    var eScaleX = el.get('scaleX');
    var eScaleY = el.get('scaleY');

    var width = eWidth * 1;
    var height = eHeight * 1;

    object.clipTo = function (ctx) {
        ctx.rect(-(eWidth / 2) + left, -(eHeight / 2) + top, parseInt(width * eScaleX), parseInt( height * eScaleY));
    }

    canvas.remove(el);
    lastActive = object;
    canvas.renderAll();
}
</code></pre>

<p>Thanks !</p>