如何通过canvas获取指定的图片形状？

Question

已知一张图的人脸轮廓坐标，怎么把人脸部分单独提取出来？

Answer 1

2d.getImageData()

获取指定区域的的图像数据

如果你还想要不规则的区域，可以自己剪裁
2d.clip()

Answer 2

比如用 const coordinate = [[x1,y1],[x2,y2]] 表示人脸坐标

    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const coordinate = [[100,100],[200,200]]
    const [x1, y1] = coordinate[0];
    const [x2, y2] = coordinate[1];

    const clipWidth = Math.abs(x2 - x1);
    const clipHeight = Math.abs(y2 - y1);
    const img = new Image()
    img.src = "原图URL"
    img.onload = ()=>{
        ctx.drawImage(img,x1,y1,clipWidth,clipHeight,0,0,clipWidth,clipHeight)
        const data = canvas.toDataURL('image/png')
    }