Javascript 画布-裁剪不同形状的图像

我在一个网站上工作，我需要裁剪不同形状的图像。 我找到了很多库，也测试了一些，但主要的问题是它们只能在预定义的形状（如矩形、圆形）上裁剪图像。我需要的是裁剪任何形状的图像

例如，我已经编写了一个代码，用户可以定义他们的形状（通过使用Map Area），确切的形状是make，现在我需要裁剪图像或复制此区域并从中生成新图像

我可以使用php、jquery和其他平台

你能帮我解决这个问题吗

---

King问候

这里有一种使用html5画布的方法：

    ctx.clip();

     ctx.drawImage(yourImageObject,0,0);

1。使用area元素的

coords

在画布上绘制路径。

// assume you've put the `coords` points as {x:,y:} objects into a points[] array:

    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++){
        var p=points[i];
        ctx.lineTo(points[i].x,points[i].y);
    }
    ctx.closePath();

// see demo below for details 

3。在画布上绘制图像。图像将被剪切到您定义的路径中：

    ctx.clip();

     ctx.drawImage(yourImageObject,0,0);

4。创建第二个画布，大小与剪裁路径大小相同，并使用

context.drawImage的剪裁版本将剪裁后的图像仅绘制到第二个画布上。

// assume you've put the `coords` points as {x:,y:} objects into a points[] array:

    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++){
        var p=points[i];
        ctx.lineTo(points[i].x,points[i].y);
    }
    ctx.closePath();

// see demo below for details 

5。从第二个画布创建新图像（），任务完成

// create a new Image() from the second canvas

    var clippedImage=new Image();
    clippedImage.onload=function(){
        // append the new image to the page
        document.body.appendChild(clippedImage);
    }
    clippedImage.src=secondCanvas.toDataURL();

带注释的示例代码和演示：


//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-cw，ch；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//设置一些画布样式
ctx.strokeStyle='black'；
//用于保存定义剪裁区域的用户单击点的数组
var点=[]；
//加载图像
var img=新图像（）；
img.crossOrigin='anonymous'；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/houses1.jpg";
函数start（）{
//调整画布大小以适合img
cw=画布宽度=图像宽度；
ch=画布高度=图像高度；
//以25%的不透明度绘制图像
drawImage（0.25）；
//倾听鼠标向下移动和按钮点击
$（#canvas'）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#重置”）。单击（函数（）{points.length=0；drawImage（0.25）；}）；
}
功能手柄向下（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
//计算mouseX和mouseY
mx=parseInt（e.clientX-offsetX）；
my=parseInt（e.clientY-offsetY）；
//将单击的点推送到points[]数组
push（{x:mx，y:my}）；
//向用户显示其当前剪辑路径的轮廓
大纲图（）；
//如果用户在原始圆圈中单击“上一步”
//然后完成剪辑
如果（点长度>1）{
var dx=mx点[0].x；
var dy=我的点[0].y；
如果（dx*dx+dy*dyI对不起，什么是地图面积？你是指
和
标签吗？你能发布一些示例代码吗（不是全部，只是一点点）这样我们才能更清楚地理解？@soktinpk是的，没错。我的意思是和标签。我现在不在电脑上，所以我不能发送代码，但我会尽快发布它们。您可能需要使用某种
剪辑（）
功能：非常感谢您的帮助，这正是我所需要的。还有一个问题，我有没有办法保存剪切的图像？我知道我可以右键单击并单击“保存图像”，但我想将其保存到我的webhost@mehdiyamani不客气，很高兴我能帮上忙。在服务器上保存客户机映像的一种常见方法是使用AJAX.C配置服务器超出了此问题的范围，但我怀疑这是您的网络主机用户论坛上经常问到的问题。祝您的项目好运！Hi@markE，我无法成功运行您的脚本，您能否将代码放在某个地方，以便我可以像在JSFIDLE中一样尝试它们？