以下是使用html5画布执行此操作的一种方法：

x1c 0d1x

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

2.从您刚刚定义的coords路径建立裁剪路径：

ctx.clip();

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

ctx.drawImage(yourImageObject,0,0);

4.创建大小与剪切路径大小相同的第二个画布，并使用context.drawImage的剪切版本在第二个画布上仅绘制剪切的图像。

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

带注解的示例代码和演示：
第一个