첫 번째 질문은 상대적으로 쉽습니다.
$(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?
1. 이미지 처리 라이브러리가있는 CSS 및 JS 또는 서버 측을 통해이 클라이언트 측을 구현 하시겠습니까? 2.이 대화는 다음과 같이 도움이 될 수 있습니다. http://stackoverflow.com/questions/7291065/any-library-for-face-recognition-in-javascript –