2013-04-14 3 views
0

저는 웹 앱을 개발 중이며 웹 개발에 새로운 경험이 있습니다.사진의 무작위 하위 섹션을 얻으십시오.

현재 내 프로그램은 사진을 가져와 사용자 입력을 요청합니다. 내 프로젝트에 대한

나는 두 가지 중 하나를 수행 할 수 있어야 할 수 있습니다 :

  1. 이 사진의 임의의 사각형을 선택하고 해당 부분을 표시합니다. 페이지가 다시로드되어 다른 부분을 표시 할 때마다이 부분의 이미지가 변경되기를 바랍니다.

  2. 눈이나 입과 같은 얼굴 특징을 감지하고 이미지의 해당 부분 만 표시합니다.

무료 라이브러리 또는 이러한 기능 중 하나를 구현하는 쉬운 방법은 무엇입니까?

감사합니다!

+0

1. 이미지 처리 라이브러리가있는 CSS 및 JS 또는 서버 측을 통해이 클라이언트 측을 구현 하시겠습니까? 2.이 대화는 다음과 같이 도움이 될 수 있습니다. http://stackoverflow.com/questions/7291065/any-library-for-face-recognition-in-javascript –

답변

1

첫 번째 질문은 상대적으로 쉽습니다.

$(document).ready(function() { 
    // Generate random x-y coordinates 
    var x = parseInt(100*Math.random(0,1)), 
     y = parseInt(100*Math.random(0,1)); 

    // Set background-image and position 
    $('#img').css({ 
     'background-image':'url('+$('#img').data('img-src')+')', 
     'background-position':x+'% '+y+'%' 
    }); 
}); 

는 HTML의 경우 : 당신이 필요로하는 사각형 요소, 말하는 <div>의 배경 이미지로 이미지 URL을 설정 한 다음 무작위로 background-position: x% y% 속성에 대한 x%y%를 생성하는 JS를 사용하는 것입니다 우리는 HTML data- 속성을 활용 :

<div id="img" data-img-src="/path/to/image"></div> 

을 CSS 꽤 똑바로 앞으로도 :

#img { 
    width: 400px; 
    height: 400px; 
} 
,

당신은 여기에 바이올린 볼 수 있습니다 - http://jsfiddle.net/teddyrised/gabxj/

두 번째 질문 - 당신이을 어떤 시도를? Google 및 SO에서 빠른 검색을 수행했습니다. Any library for face recognition in JavaScript?

+0

내가 검색했지만 가장 좋은 제안은 찾고 있었지만 너를 도와 줘. 지금 당장 당신의 기능을 시험해 볼 것입니다! – dspiegs

관련 문제