Javascript 使用样条线剪裁图像？

我在画布元素中有一张用户脸的图像。我希望他们能够画出它周围，以减少它。我已经成功地使用了一个拼接来围绕他们的脸绘制一条平滑的曲线（拼接点阵列随着每次鼠标点击而增加一个，越来越长）

但我不确定如何实际使用此样条线来剪裁图像。我可以使用mySpline.allPoints数组访问点数组，然后绘制自己的剪裁路径，但这会生成一个非常线性的形状，没有所有漂亮的样条曲线计算曲线

---

有人有解决方案吗？

这可能不是最好的答案，但下面是绘制样条线的代码：

     drawFunc: function(canvas) {
        var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
        context.beginPath();
        context.moveTo(points[0].x, points[0].y);

        // tension
        if(tension !== 0 && length > 2) {
            var ap = this.allPoints, len = ap.length;
            context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);

            var n = 2;
            while(n < len - 1) {
                context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
            }

            context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);

        }
        // no tension
        else {
            for(var n = 1; n < length; n++) {
                var point = points[n];
                context.lineTo(point.x, point.y);
            }
        }

        canvas.stroke(this);
    },

drawFunc:函数（画布）{
var points=this.getPoints（），length=points.length，context=canvas.getContext（），tension=this.getTension（）；
context.beginPath（）；
context.moveTo（点[0].x，点[0].y）；
//紧张
如果（张力！==0&&length>2）{
var ap=this.allPoints，len=ap.length；
context.quadraticCurveTo（ap[0].x，ap[0].y，ap[1].x，ap[1].y）；
var n=2；
而（n

---

它使用二次曲线和bezier曲线来绘制曲线，给定曲线的点。

因此，本质上，您需要将剪裁路径设置为所有点之间的bezier/二次曲线。如果剪切路径不允许曲线，则必须计算曲线上的中间点，并将这些点作为剪切路径的一部分。谢谢EliteOctagon。这是我自己想出的最好的解决办法。在进行实际剪裁时，我只需抓取样条曲线（及其所有点——它似乎以某种方式生成了一些“中间”点，这是需要的）。然后，我只需使用上面的代码再次手动绘制一条剪切路径。很遗憾，因为我正在复制代码，但它是有效的：）有没有可能在JSFIDLE中显示一些代码？我很想看到裁剪曲线的功能在发挥作用。一些重复的代码不会有什么坏处，如果你的整个程序到处都是重复的话，那就不一样了。没问题。很难放入JSFIDLE，因此我已将正在进行的工作上载到我的域。-点击“开始”加载图像——点击“开始剪辑路径”并在面周围单击以绘制点——点击“完成剪辑路径”以完成。现在您可以拖动和编辑点--点击“剪辑”来剪辑图像