순 전단 안면 인식 실현 - 추출 - 합성

원본 주소:http://refined-x.com/2017/09/06/%E7%BA%AF%E5%89%8D%E7%AB%AF%E5%AE%9E%E7%8E%B0%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB-% E6% 8F% 90% E5% 8F% 96 -% E5% 90% 88% E6% 88% 90 /, 전재 출처 를 밝 혀 주 십시오.
최근 뜨 거 운 친구 권 의 군복 사진 H5 는 아직도 기억 에 남 을 것 입 니 다. 그 원 리 는 먼저 사진 속 의 얼굴 을 꺼 낸 다음 에 템 플 릿 과 합성 하 는 것 입 니 다. 공식 적 인 합성 처 리 는 매일 P 그림 에서 기술 지원 을 제공 하고 백 엔 드 를 합성 한 후에 전단 에 보 여 주 는 것 이 라 고 합 니 다. 형식 이 참신 하고 효과 도 좋 습 니 다.전체 프로 세 스 와 관련 된 얼굴 인식 과 이미지 합성 두 가지 핵심 기술 은 전단 에 모두 대응 하 는 해결 방안 이 있 기 때문에 이론 적 으로 전단 에서 도 얼굴 인식 - 추출 - 전체 프로 세 스 를 합성 하여 순 전단 의 군복 사진 H5 효 과 를 실현 할 수 있다.
전단 얼굴 인식
먼저 필요 한 것 은 사람의 얼굴 인식 이다. 이 말 을 들 으 면 높 고 큰 것 의 원리 가 심오 하지 않다 고 생각한다. 사람의 얼굴 특징 규칙 으로 이미 지 를 일치 시 키 고 식별 하 는 것 이 아니다. 이 작업 의 전단 은 실현 할 수 있 지만 전단 실현 은 기본적으로 내 장 된 규칙 에 따라 라 이브 러 리 에 들 어가 서 일치 할 수 밖 에 없다. 이 라 이브 러 리 의 질 은 식별 의 질 을 결정 한다.통상 적 으로 더욱 성숙 한 방안 은 기계 학습 을 도입 하여 프로그램 을 끊임없이 자체 수정 하고 향상 시 키 며 식 별 률 을 더욱 높이 는 것 이다. 기계 학습 의 전단 라 이브 러 리 도 있 지만 이 두 가 지 를 결합 한 것 은 아직 발견 되 지 않 았 기 때문에 전단 얼굴 식별의 정확도 에 대해 너무 높 은 기 대 를 하지 마라.
기 존의 전단 얼굴 인식 라 이브 러 리 는 많 지 않 습 니 다. 여기 서 우리 가 선택 한 것 은 효과 가 상대 적 으로 좋 은 trackingjs 입 니 다. 이 라 이브 러 리 는 기능 이 매우 강하 고 라 이브 러 리 는 이름 과 같 습 니 다. 이 라 이브 러 리 는 각종 추적 류 의 이미지 처리 임 무 를 완성 할 수 있 습 니 다. 얼굴 인식 은 여러 가지 기능 중 하나 일 뿐 아니 라 선택 플러그 인 을 통 해 눈, 코 등 이목 구비 의 위 치 를 정확하게 식별 할 수 있 습 니 다.조금 만 괴 롭 혀 도 미 도수 의 효 과 를 거 둘 수 있 을 것 같다.
여기 서 우 리 는 trackingjs 로 얼굴 인식 을 실현 하고 얼굴 인식 임 무 를 초기 화 하 는 코드 는 다음 과 같다.

//   
var tracker = new tracking.ObjectTracker(['face']);
//    
tracker.on('track', function(event) {
    if (!event.data.length) {
        return console.log('       ');
    }
    event.data.forEach(function(rect, i) {
        console.log(rect);//      
    })
})
//    
...

이러한 얼굴 인식 임 무 는 초기 화 되 었 고 호출 방식 은 다음 과 같다.

tracking.track('#img', tracker);
//  '#img'           

식별 반전 에서 event.data 는 바로 배열 형식의 얼굴 데이터 이다. 길이 가 0 이면 이미지 에 얼굴 이 없 거나 식별 에 실 패 했 음 을 나타 낸다. 만약 에 식별 에 성공 하면 하나의 얼굴 데이터 의 형식 은 다음 과 같다.

{
    x: number,          //      x     
    y: nuber,           //      y     
    width:number,       //      
    height:nubmer       //      
}

이 얼굴 데이터 가 있 으 면 이 구역 을 원 그림 에서 쉽게 추출 할 수 있 습 니 다. 전단 은 당연히 canvas 을 사용 합 니 다. 예 를 들 어 다음 과 같 습 니 다.

var img = document.getElementById("img");
var faceCtx = document.getElementById("mycanvas").getContext('2d');

var theFace = ...; //        theFace

//  drawImage()         
faceCtx.drawImage(img, theFace.x, theFace.y, theFace.width, theFace.height, 0, 0, theFace.width, theFace.height);

여기 서 우 리 는 얼굴 인식 + 추출 을 실 현 했 고 코드 의 양도 얼마 되 지 않 았 다. 사실 이 안에 작은 구덩이 가 있 는데 실천 을 통 해 알 수 있다. 그것 이 바로 trackingjs 의 설정 이다. 문서 에서 식별 과 관련 된 4 개의 설정 을 찾 을 수 있다. 각각:

setClassifiers(classifiers)
setEdgesDensity(edgesDensity)
setScaleFactor(scaleFactor)
setStepSize(stepSize)

잘 모 르 겠 습 니 다. 저도 잘 모 르 겠 습 니 다. 그리고 문서 에서 그들 에 게 유용 한 설명 이 없습니다. 테스트 에서 저 는 뒤의 두 가지 설정 만 사 용 했 습 니 다. 번역 해 보 니 각각 '비례 인자' 와 '걸음 길이' 입 니 다. 지루 한 인 육 테스트 를 통 해 이 두 매개 변수의 효과 적 인 수치 범 위 는 각각 1 - 2 과 1.1 - 2 에 있 습 니 다. 그 중에서 setStepSize 는 1 일 수 없습니다.그렇지 않 으 면 브 라 우 저가 끊 겨 죽 기 때문에 1.1 부터 값 을 추출 하면 2 를 초과 해도 되 지만 식별 에 성공 할 확률 은 낮다.이 두 개의 매개 변 수 를 조정 하면 대부분 이미 지 를 성공 적 으로 식별 할 수 있 습 니 다. 얼굴 클로즈업 만 식별 하기 어렵 습 니 다. 이것 은 다른 두 개의 매개 변 수 를 맞 춰 야 할 것 같 습 니 다. 저 는 인 육 테스트 를 계속 할 인내심 이 없어 서 관심 이 있 는 자신 이 놀 러 가 겠 습 니 다.
전단 이미지 처리
지난 단계 의 식별 + 추출 을 통 해 우 리 는 이미 얼굴 이미 지 를 얻 었 습 니 다. 합성 군복 사진 효 과 를 실현 하려 면 우 리 는 얼굴 이미 지 를 처리 해 야 합 니 다. 색조 와 템 플 릿 이 일치 해 야 나중에 위 화 감 없 이 융합 될 수 있 습 니 다. 구체 적 으로 군복 사진 이라는 예 에서 우 리 는 얼굴 을 다시 착색 시 키 고 '옛날 사진 을 만 드 는' 효 과 를 달성 해 야 합 니 다.PS 를 쓰 면 다 들 할 수 있 겠 지만 앞에서 어떻게 이 룰 수 있 을 까?
여기 서 우 리 는 텐 센트 전단 팀 이 제작 한 Alloy Image 를 빌려 야 한다. 이것 은 전단 PS 라 고 할 수 있 는 전단 이미지 처리 라 이브 러 리 이다. 예 를 들 어 상기 효 과 를 실현 하려 면 우 리 는 이렇게 해 야 한다.

var faceImg = document.getElementById("theFace");
faceImg.loadOnce(function() {
    AlloyImage(this).act("    ").add(
        AlloyImage(this.width, this.height, "#808080")
        .act("    ", 4)
        .act("  /     ", 22, 45, 0, true),
        "  "
    ).replace(this);
}

그리고 당신 은 오래된 얼굴 을 얻 었 습 니 다. 아주 간단 합 니 다. Alloy Image 의 사용 은 기본적으로 바보 화 라 고 할 수 있 습 니 다. 관심 이 있 는 사람 은 5 분 동안 공식 문 서 를 보 세 요. 여 기 는 더 이상 군말 하지 않 겠 습 니 다.
그리고 우리 의 이 이미지 처리 와 남 들 이 매일 P 그림 의 차 이 를 말 해 야 한다. 비록 우 리 는 이상 적 인 색 조 를 얻 었 지만 어떤 사람의 얼굴 과 특정한 템 플 릿 을 합성 하려 면 두 가지 일이 없어 서 는 안 된다.먼저 얼굴 각도 교정 입 니 다. 만약 에 템 플 릿 이 바 르 고 당신 의 사진 이 비 뚤 어 지면 직접 폭력 으로 연결 하 는 것 은 어 긋 날 수 있 기 때문에 먼저 얼굴 각 도 를 식별 하고 지 정 된 각도 로 바로 잡 아야 합 니 다.그 다음 에 얼굴 중심 포 지 셔 닝 이다. 얼굴 인식 결 과 를 추출 한 후에 반드시 얼굴 중심 을 중심 으로 하 는 것 이 아니 기 때문에 합성 하기 전에 얼굴 중심선 을 식별 하고 이 를 근거 로 템 플 릿 과 포 지 셔 닝 을 해 야 한다.그러나 이런 것들 이 우리 에 게 없 기 때문에 우 리 는 입력 한 이미지 에 대한 요구 가 더욱 높 을 수 밖 에 없다. 입 이 비 뚤 어 진 그림 을 입력 하면 결 과 는 어색 할 수 밖 에 없다.
마지막 그림 합성 부분 은 더욱 초라 해 집 니 다. 먼저 처 리 된 얼굴 을 캔버스 의 지 정 된 위치 에 그린 다음 에 그림 을 파 놓 은 얼굴 투명 png 템 플 릿 을 위 에 깔 고 완성 합 니 다.실제 과정 에서 작은 문 제 를 처리 해 야 한다. 예 를 들 어 템 플 릿 의 얼굴 크기 에 따라 얼굴 이미 지 를 적당 한 사이즈 로 확대 해 야 한다.템 플 릿 을 파 낼 때 가장 자 리 를 모호 하 게 처리 하고 템 플 릿 원래 의 얼굴 윤곽 을 최대한 보존 하 며 이목 구비 만 파 내야 한다.그럼 에 도 합성 결 과 는 쉽게 들 키 지만 순 전단 처리 로 는 더 좋 은 방법 이 없다.
효과 전시
자, 아무리 많은 말 을 하 더 라 도 예 를 보 는 것 보다 못 하 다. 예 를 들 어 세 가지 그림 입력 원 을 제공 하 는데 그것 이 바로 로 컬 그림, 원 격 그림, 내 장 된 예제 이다.그 중에서 내 장 된 그림 은 대부분이 PS 에서 각 도 를 미리 고 친 것 이 고 내 장 된 그림 은 제 가 미리 조정 한 매개 변수 와 자동 으로 일치 하 며 의외 의 사고 가 발생 하지 않 으 면 사람의 얼굴 을 직접 식별 할 수 있 습 니 다.로 컬 그림 을 이미지 소스 로 선택 하면 머리 자세 가 수직 인 정면 사진 을 선택 하 는 것 이 좋 습 니 다. 또한 내 장 된 이미지 의 매개 변수 설정 조절 파 라 메 터 를 참고 하여 한 번 에 식별 이 성공 하지 못 하고 정상 적 이 므 로 몇 번 더 조정 해 야 합 니 다.원 격 이미지 인식 도 사용 할 수 있 지만 canvas 는 도 메 인 정책 의 영향 을 받 아 원 격 이미지 만 식별 할 수 있 고 추출 과 합성 이 불가능 합 니 다.
예: 순 전단 군복 사진 합성
후기
처음에는 호기심 을 가지 고 이 프로젝트 를 만 들 기 시 작 했 습 니 다. 최종 적 인 합성 효 과 는 생산 요구 에 크게 미 치지 못 했 지만 전체 사례 를 살 펴 본 후에 얼굴 인식 과 이미지 처리 기술 에 대해 기본 적 인 인식 을 가지 게 되 었 습 니 다. canvas 작업 중의 일부 세부 적 인 문제 에 대한 해결 도 이 분야 의 지식 공백 을 약간 보완 하여 얻 은 셈 입 니 다.