Fabric.js-具有矩形的动态裁剪区域

Question

I want to make and dynamic crop area and found this 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 pen for some help ?

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 && 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();
}

Thanks !

Answer 1

when you create a rect, you can create new image with toDataURL(). What will be cropped image.

 cropOptions = {
              left: Math.floor(rect.left),
              top: Math.floor(rect.top),
              width: Math.floor(rect.width),
              height: Math.floor(rect.height)
           },
      cropDataUrl ;

                 cropDataUrl = image.toDataURL(cropOptions); 

           new fabric.Image.fromURL(cropDataUrl, function(img) {
               canvas.remove(image,rect).add(img); //this is your cropped image
             })