JavaScript에서 얼굴 (기타 모양) 을 검사하는 방법

구글은 Web that can compete with native applications unintimidated을 믿는다.여러 해 동안 로컬 응용 프로그램이 웹 응용 프로그램보다 우수한 분야는 이미지의 모양을 측정하는 것이다.안면인식 같은 임무는 최근에야 가능해졌는데...지금은 불가능해!

형태 체크 API

인터넷 플랫폼 부화기 커뮤니티팀(WICG)은 최근 새로운 표준 제안인 Shape Detection API을 발표했다.이렇게 하면 이미지에서 두 가지 형태를 탐지할 수 있습니다.

faces,

barcodes and QR codes .

현재 이 두 탐지기는 모두 크롬 내부에 설치되어 있다.기본적으로 바코드 검사는 사용 상태이고 얼굴 검사는 표지 뒤에 있다(chrome://flags#enable-experimental-web-platform-features).또 하나의 규범은 Text Detection API을 정의하여 텍스트를 검사할 수 있도록 한다.
모든 탐색기는 동일한 API를 공유합니다.

const detector = new FaceDetector( optionalOptions );
const results = await detector.detect( imageBitmap );

세 개의 글로벌 인터페이스(페이지 내부 및 웹 워커 스레드 내부)가 있습니다.

FaceDetector,

BarcodeDetector,

TextDetector .

optionalOptions 매개 변수는 탐지기의 추가 설정을 포함하는 대상이다.모든 형태 탐지기는 자신의 옵션 집합을 가지고 있지만, 이 인자를 완전히 무시할 수도 있습니다. 대부분의 경우 기본값은 충분합니다.
검측기를 구성한 후 비동기 detect() 방법으로 이미지의 형상을 실제 검측할 수 있다.이 방법은 이미지의 모양 좌표와 객체에 대한 추가 정보(예: TextDetector API에서 인식할 수 있는 텍스트, 또는 FaceDetector API의 특정 얼굴 부분(예: 눈이나 코)의 좌표)를 포함하는 객체를 반환합니다.imageBitmap 파라미터는 분석할 이미지로 ImageBitmap instance으로 전달된다.
방주: 왜 이 ImageBitmap은 img원소가 아니거나 단지 Blob원소일 뿐입니까?형상 감지기는 근로자가 DOM에 접근할 수 없기 때문에 근로자 내부에서도 사용할 수 있기 때문이다.ImageBitmap 대상을 사용하면 이 문제를 해결할 수 있다.그 밖에 canvas 요소(offscreen ones 포함), 심지어 video 등 더 많은 이미지 원본을 사용할 수 있다.
기본적으로 그렇습니다!

예제 응용 프로그램

자, 새로운 지식이 실천에 어떻게 응용되는지 봅시다.제안된 API를 사용하여 모양을 감지할 수 있는 예시 웹 응용 프로그램을 준비합니다.

은 사진에 올라온 사람의 얼굴과 텍스트를 형태 감지 API로 감지합니다.

HTML

index.html 파일부터 시작:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Detection API demo</title>
</head>
<body>
    <h1>Shape Detection API</h1>

    <h2>Face detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="face">
    </label>

    <h2>Barcode detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="barcode">
    </label>

    <h2>Text detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="text">
    </label>

    <script type="module">
    </script>
</body>
</html>

141560은 분석할 세 개의 원본을 포함하는 이미지입니다.스크립트가 검색할 모양을 알리는 input[type=file] 속성이 있습니다.또한 [data-type] 요소는 script[type=module] 요소를 처리하는 데 필요한 코드를 포함합니다.

import detectShape from './detector.mjs'; // 1

document.body.addEventListener( 'change', async ( { target } ) => { // 2
    const [ image ] = target.files; // 3

    const detected = await detectShape( image, target.dataset.type ); // 4

    console.log( detected ); // 5
} );

우선 input(1)에서 detectShape() 함수를 가져옵니다.이 기능은 전체 작업을 완성할 것이다.
그리고 detector.mjs 사건 탐지기를 change(2)에 연결한다.event delegation 메커니즘으로 인해 document.body 원소의 모든 변화에 반응할 것이다.
그 밖에 감청기는 비동기적이다. 왜냐하면 검측기도 비동기이기 때문에 나는 가능한 한 input/async 문법을 사용하는 것을 좋아한다.
또 하나의destructuring 문장은 탐지기에 전달된 await 대상의 target 속성만 획득하기 때문에 이벤트를 촉발하는 요소만 획득합니다.
다행히도 다음 줄은 붐비지 않고 사용자가 선택한 파일을 기본적으로 얻어 event 변수(3)에 저장했다.
그림을 가져올 때, 탐지기 형식과 함께 image 함수에 전달하고, 탐지기 형식은 detectShape() 속성 (4) 에서 가져옵니다.
결과를 기다리면 콘솔에 로그인할 수 있습니다(5).

JavaScript

[data-type] 파일로 이동하겠습니다.

const options = { // 5
    face: {
        fastMode: true,
        maxDetectedFaces: 1
    },
    barcode: {},
    text: {}
}
async function detectShape( image, type ) {
    const bitmap = await createImageBitmap( image ); // 2
    const detector = new window[ getDetectorName( type ) ]( options[ type ] ); //3
    const detected = await detector.detect( bitmap ); // 6

    return detected; // 7
}

function getDetectorName( type ) {
    return `${ type[ 0 ].toUpperCase() }${ type.substring( 1 ) }Detector`; // 4
}

export default detectShape; // 1

이 파일에는 내보내기가 하나만 있습니다. 기본 내보내기: detector.mjs(1).이 함수는 detectShape() 전역 함수(2)를 사용하여 전달된 파일( File instance)을 필요한 ImageBitmap으로 변환합니다.그리고 적합한 탐지기를 만듭니다 (3).
구조 함수 명칭은 createImageBitmap() 매개 변수에서 파생된다.그것의 첫 번째 자모는 대문자로 바뀌었고 type 접미사를 추가했다(4).
또 하나의 대상은 각 종류의 탐지기의 옵션을 포함한다(5).바코드와 텍스트 감지기는 모두 기본 옵션을 사용하지만 얼굴 감지기에는 두 가지 옵션이 있습니다.

Detector – 부정확한 검사를 시작합니다(이것은 더 많은 사람의 얼굴을 식별하지만 오보의 수를 증가시킵니다).

fastMode – maxDetectedFaces으로 설정하면 얼굴 하나만 감지됩니다.

형상 탐지기를 만들면 1 방법을 사용하고 결과를 기다릴 수 있습니다 (6).결과가 도착했을 때 그것들을 되돌려줍니다 (7).

어플리케이션 실행

인코딩이 완료되었지만, 디렉터리에서 프로그램을 직접 시작하면 정상적으로 작동하지 않습니다.코드가 CORS rules으로 바인딩된 ES 모듈을 사용하기 때문입니다.이러한 문제는 두 가지 해결 방안이 있다.

에서 모듈이 아닌 자바스크립트로 전환합니다. 더 이상 멋있지 않을 것입니다.

로컬 네트워크 서버를 사용하여 웹 서비스를 제공합니다. - 당신은 여전히 멋있을 것입니다.

다행히도 로컬 웹 서버를 사용하는 것은 매우 간단합니다. 응용 프로그램의 디렉터리에서 다음 명령을 실행하기만 하면 됩니다.

npx http-server ./

detect() npm package을 다운로드하여 실행합니다.그리고 http-server(또는 터미널에 표시될 다른 주소)으로 이동해서 바코드, 텍스트, 얼굴 검사 프로그램을 테스트할 수 있습니다.Chrome을 사용하고 실험적인 웹 플랫폼 기능을 활성화하는 것을 기억하세요!
이렇게!새로운 형태 검사 API가 생겨서 이미지의 일부 형태를 검사하는 것은 상당히 쉽다. 적어도 크롬에서는 이렇다.다른 브라우저가 따라갈지 지켜볼 때까지 기다려야 합니다.

소스 코드 및 데모

The complete code of the application is available on GitHub . live text, barcode and face detection demo이 약간 강화되어 있어 사용하실 수 있습니다.Its source code is also available on GitHub . 불행하게도, 이 글을 작성할 때, 리눅스는 형상 검사를 지원하지 않습니다.
다음 단계에서 얼굴 검사의 가장 중요한 응용 중 하나는 얼굴 식별이다.이 기술은 영상이나 영상 프레임에서 검출된 얼굴과 얼굴 데이터베이스를 일치시킨다.다른 생물 식별 기술과 마찬가지로 사용자의 신분을 검증하고 컴퓨터, 스마트폰 또는 다른 로봇 시스템과 상호작용하며 자동으로 이미지를 인덱스하거나 영상 모니터링에 사용할 수 있다.

Reference

이 문제에 관하여(JavaScript에서 얼굴 (기타 모양) 을 검사하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ckeditor/how-to-detect-human-faces-and-other-shapes-in-javascript-1b5i

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)