如何通过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')

    }