在经历了无数次讨论和互联网解决方案之后，我暂时使用 Fabric Rectangle 作为裁剪器并设置它的边界以便用户可以删除/在那个特定的剪刀中玩.

After going through no.of discussions and internet solutions, for time being I am using Fabric Rectangle as a clipper and setting it's boundaries so user can be able to drop/play with in that particular clipper.

红色虚线(下图)是我的剪刀，现在我可以绑定掉落，下面是使用剪刀添加图像的代码.

Dotted red(image below) is my clipper and now I can bound the dropping and below is the code to add an image with a clipper.

function addImageToCanvas(imgSrc) { 
    fabric.Object.prototype.transparentCorners = false;    
    fabric.Image.fromURL(imgSrc, function(myImg) {
        var img1 = myImg.set({
            left: 20,
            top: 20,
            width: 460,
            height: 460
        });
        img1.selectable = false;
        canvas.add(img1);

        var clipRectangle = new fabric.Rect({
            originX: 'left',
            originY: 'top',
            left: 150,
            top: 150,
            width: 200,
            height: 200,
            fill: 'transparent',
            /* use transparent for no fill */
            strokeDashArray: [10, 10],
            stroke: 'red',
            selectable: false
        });

        clipRectangle.set({
            clipFor: 'layer'
        });
        canvas.add(clipRectangle);

    });
}

现在，在将任何图像/图层附加到画布时，我将该图像/图层/文本绑定到我创建的剪刀.

Now while appending any image/layer to the canvas, I bind that image/layer/text to the clipper I created.

function addLayerToCanvas(laImg) {

    var height = $(laImg).height();
    var width = $(laImg).width();
    var clickedImage = new Image();
    clickedImage.onload = function(img) {

        var pug = new fabric.Image(clickedImage, {

            width: width,
            height: height,
            left: 150,
            top: 150,
            clipName: 'layer',
            clipTo: function(ctx) {
                return _.bind(clipByName, pug)(ctx)
            }
        });
        canvas.add(pug);
    };
    clickedImage.src = $(laImg).attr("src");

}

看起来像，在限制边界后，

And the looks like, after restriction of bounds,

这是我用一些静态图像 url 创建的小提琴.

Here is the fiddle I have created with some static image url.

https://jsfiddle.net/sureshatta/yxuoav39/

所以我现在坚持使用这个解决方案，我真的觉得这很黑很脏.寻找其他一些干净的解决方案.

So I am staying with this solution for now and I really feel like this is hacky and dirty. Looking for some other clean solutions.