Javascript 如何创建与polyvore提供的裁剪功能相似的裁剪功能

我如何在图像上提供裁剪功能，类似于我在下面的屏幕截图中提供的功能

---

这不是100%，但从外观上看，它使用了带有React扩展的React.js，这可能是您想要的。从你的照片来看，这可以解决你想要的问题

用于拖动事件（拖动零件）

用于鼠标事件（裁剪部分）

一旦你包含了脚本，你就可以侵入代码

React.js：用于构建用户界面的JAVASCRIPT库

React extensions：让您轻松处理事件，例如单击事件、键盘事件、dragdrop事件。。。等

• 这不是一个插件。事实上，似乎根本没有JQuery

• 开发人员似乎复制了FB Toolkit的未公开部分（图片裁剪）和Handle Bars.JS的部分内容

• 动画是用SVG制作的

主JS工作文件（未缩小的30289行）是：

您最感兴趣的零件是：

ImageItem.prototype.startCrop = function() {
    LassoDialog.showExpanded(this)
};

开发人员从FB的源代码中获取了这一点，并对其进行了轻微修改：

function FBPhoto(b) {
    this.fbImgUrl = b.imgurl;
    this.pid = b.pid;
    FBPhoto.superclass.constructor.call(this, b);
    var a = 3;
    Event.addListener(this.img, "error", function() {
        a--;
        if (a) {
            this.img.setSrc("");
            window.setTimeout(Event.wrapper(function() {
                this.updateImage()
            }, this), 200)
        }
    }, this);
    if (!this.rect.width()) {
        getNaturalWidthHeight(b.imgurl, Event.wrapper(function(c, d) {
            if (c && d) {
                b.w = c;
                b.h = d
            } else {
                b.w = 200;
                b.h = 200
            }
            b.x = 0;
            b.y = 0;
            this.rect = new Rect(-b.w / 2, -b.h / 2, b.w / 2, b.h / 2);
            this.translation = new Point(b.x + b.w / 2, b.y + b.h / 2);
            Event.trigger(this, "change");
            Event.trigger(this, "sized", this)
        }, this))
    }
}

然后扩展了该方法：

extend(FBPhoto, ImageItem);
FBPhoto.mapImgUrl = function(a, b) {
    var d = UI.sizeMap[b].dim;
    var c;
    if (d < 100) {
        c = "t"
    } else {
        if (d < 150) {
            c = "s"
        } else {
        }
    }
    if (c) {
        a = a.replace(/_n\.jpg/, "_" + c + ".jpg").replace(/\/n([^\/]*)\.jpg$/, "/" + c + "$1.jpg")
    }
    return a
};
FBPhoto.prototype.startCrop = function() {
    LassoDialog.showSimple(imgUrl, this, {header: loc("Crop your friend's face by drawing a path around it..."),onSuccess: Event.wrapper(function(b, a) {
            this.mask_spec = b || [];
            this.updateImage();
            Event.trigger(this, "updateactions", this);
            this.setDimensions(a);
            Event.trigger(this, "change")
        }, this)})
};

extend（FBPhoto，ImageItem）；
FBPhoto.mapImgUrl=函数（a，b）{
var d=UI.sizeMap[b].dim；
var c；
如果（d<100）{
c=“t”
}否则{
如果（d<150）{
c=“s”
}否则{
}
}
如果（c）{
a=a.replace（/\/n\.jpg/，“\+c+”.jpg”）。replace（/\/n（[^\/]*）\.jpg$/，“/”+c+“$1.jpg”）
}
归还
};
FBPhoto.prototype.startCrop=函数（）{
showSimple（imgUrl，this，{header:loc（“通过在朋友的脸周围画一条路径来裁剪它…”），onSuccess:Event.wrapper（函数（b，a）{
this.mask_spec=b | |[]；
this.updateImage（）；
触发器（此为“updateactions”，此为）；
本条第（a）款；
事件触发（本“变更”）
}，本}）
};

确定必要的功能 我一直在寻找的功能：

它应该允许覆盖图像

它应该允许编辑各个点

应该可以生成裁剪后的图像

理想情况下，它应该允许图像的非裁剪区域变灰

可悲的是（也有点令人惊讶的是），我找不到一个能为你做这件事的图书馆，但离我最近的是图书馆。在前面的4点中，它只能做到第1点和第3点。换句话说，有必要旋转您自己的解决方案，因为我认为第2点是一个相当大的要求。接下来的两个部分将为您做一些工作，但它肯定不同于一个现成的插件

---

绘制可编辑多边形 我能找到的绘制多边形的最佳库是PolyK.js。遗憾的是，这远远不够完美，但它确实极大地简化了流程

下面可以找到一个基本的可编辑多边形，取自文档

var阶段，s，拖动；
变量poly=[93, 195, 129, 92, 280, 81, 402, 134, 477, 70, 619, 61, 759, 97, 758, 247, 662, 347, 665, 230, 721, 140, 607, 117, 472, 171, 580, 178, 603, 257, 605, 377, 690, 404, 787, 328, 786, 480, 617, 510, 611, 439, 544, 400, 529, 291, 509, 218, 400, 358, 489, 402, 425, 479, 268, 464, 341, 338, 393, 427, 373, 284, 429, 197, 301, 150, 296, 245, 252, 384, 118, 360, 190, 272, 244, 165, 81, 259, 40, 216];
var dots=[]；
函数Go（）{
阶段=新阶段（“c”）；
s=新精灵（）；
阶段。添加儿童；
对于（变量i=0；i>1；
s、 图形。线条样式（6，0xff0000）；
s、 graphics.moveTo（poly[0]，poly[1]）；
对于（var i=1；i

你检查过他们的源代码吗？我检查过了，但是js被缩小了，因此无法找到他们正在使用的插件检查这个：这个原始形式的问题早在你可以请求赏金之前就应该被关闭了（它需要外部资源）。因为很遗憾，我已经编辑了q

extend(FBPhoto, ImageItem);
FBPhoto.mapImgUrl = function(a, b) {
    var d = UI.sizeMap[b].dim;
    var c;
    if (d < 100) {
        c = "t"
    } else {
        if (d < 150) {
            c = "s"
        } else {
        }
    }
    if (c) {
        a = a.replace(/_n\.jpg/, "_" + c + ".jpg").replace(/\/n([^\/]*)\.jpg$/, "/" + c + "$1.jpg")
    }
    return a
};
FBPhoto.prototype.startCrop = function() {
    LassoDialog.showSimple(imgUrl, this, {header: loc("Crop your friend's face by drawing a path around it..."),onSuccess: Event.wrapper(function(b, a) {
            this.mask_spec = b || [];
            this.updateImage();
            Event.trigger(this, "updateactions", this);
            this.setDimensions(a);
            Event.trigger(this, "change")
        }, this)})
};