홈페이지에서 카메라를 보고 싶으면 어떻게 해야 하나요?
게다가 카메라 위에 이미지를 올려놓고 싶다. 옷을 입었을 때의 느낌적인 느낌을 내몸으로 확인할 수 있게 해주고 싶다!!
이럴땐, 요렇게 해줍니다.
<div id="camera_output" style="margin: auto; width: 96%; height: 500px; background: white">
<script type="xml/momloverlay">
<moml:CAMERA id="cam" scaleType="clip" type="front" align="relative" onShow="caller.open" savePath="storage:photo" onSavePicture="onTakePhoto">
<moml:IMAGE id="cloth" layout="50,250,250,250" img="http://192.168.10.125:8888/t-shirt.png"/>
</moml:CAMERA>
</script>
</div>
PC용 웹브라우저에서는 보이지 않지만 Yooic에서 만든 앱으로 보면 웹페이지 안에 카메라가 보이게 됩니다. 카메라 위에는 티셔츠 그림도 보이네요..
이제 누군가의 몸에 옷을 대보고 어울리는지 보면 되겠네요^^.
보통 카메라가 하나만 달려 있지는 않죠~ 전면카메라와 후면카메라를 바꾸는건 어떻게 하는지 보시죠.
<button onClick="agate.runScript('camera_output.cam.type=\'back\'')">후면카메라</button>
<button onClick="agate.runScript('camera_output.cam.type=\'front\'')">전면카메라</button>
카메라 밑에 버튼을 누르면 전면 카메라를 사용할 수도 있고 후면 카메라를 사용할 수도 있습니다.
옷을 바꾸고 싶다면
<button onClick="agate.runScript('camera_output.cloth.img=\'http://192.168.10.125:8888/t-shirt.png\'')">티셔츠</button>
<button onClick="agate.runScript('camera_output.cloth.img=\'http://192.168.10.125:8888/polo-shirt.png\'')">폴로</button>
<moml:IMAGE id=“cloth” 이게 옷 이미지를 출력하고 있는 곳인데요… 여기 img=""를 옷 이미지가 있는 url로 바꿔주면 됩니다.
전체 HTML소스는 다음과 같습니다.
<!DOCTYPE HTML >
<html>
<head>
<title>camera test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
charset="utf-8" />
</head>
<body>
<div id="camera_output" style="margin: auto; width: 96%; height: 500px; background: white">
<script type="xml/momloverlay">
<moml:CAMERA id="cam" scaleType="clip" type="front" align="relative" onShow="caller.open" savePath="storage:photo" onSavePicture="onTakePhoto">
<moml:IMAGE id="cloth" layout="50,250,250,250" img="http://192.168.10.125:8888/t-shirt.png"/>
</moml:CAMERA>
</script>
</div>
<button onClick="agate.runScript('camera_output.cam.type=\'back\'')">후면카메라</button>
<button onClick="agate.runScript('camera_output.cam.type=\'front\'')">전면카메라</button>
<button onClick="agate.runScript('camera_output.cloth.img=\'http://192.168.10.125:8888/t-shirt.png\'')">티셔츠</button>
<button onClick="agate.runScript('camera_output.cloth.img=\'http://192.168.10.125:8888/polo-shirt.png\'')">폴로</button>
<p> 옷이 어울리는지 몸에 맞춰보세요.</p>
</body>
</html>
'Mobile > ApplusForm' 카테고리의 다른 글
| QR code 호출하기 (0) | 2015.12.17 |
|---|---|
| 사진업로드 & 이미지 CROP 사용하기 (0) | 2015.12.17 |
| JSON과 XML데이터 연동하기_앱플러스폼(ApplusForm, AppForm) (0) | 2013.10.28 |
| 한국물리학회 소스 분석_앱플러스폼(ApplusForm, AppForm) (0) | 2013.10.25 |
| Profile Template B01 소스 분석(2)_앱플러스폼(ApplusForm, AppForm) (0) | 2013.10.25 |
