Fabric.js - 矩形のダイナミッククロップエリア

Question

ダイナミッククロップエリアを作成したいと思い、thisスニペットが見つかりました。通常の使用では完全に機能しますが、クロップ領域を作成する前に元のオブジェクトを拡大すると、クロップ領域が正しい位置にないように見えます。このpenを参考にしてください。

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

ありがとうございます！

Answer 1

rectを作成すると、toDataURL（）を使用して新しいイメージを作成できます。何が切り取られた画像になりますか？

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 
      })