Class
- Tip&Tech
| [기타] 그냥 심심해서 만들어 본 아이폰에서 쓴 손글씨를 이미지로 저장하기 | |||||
| 글쓴이 |   닥터 |
날 짜 | 10-04-01 11:48 | 조 회 | 9785 |
|---|---|---|---|---|---|
| 간편URL |
https://www.phpschool.com/link/tipntech/71649
|
||||
|
제목이 좀 메롱한데요....
요지는 아이폰에서 손으로 쓴 글을 이미지로 저장하는거 원래는 저 이미지를 분석해서 문자인식으로 만들고 싶은데.......이런 ㅤㅆㅘㅇ ocr 조낸 어렵 네요... 내공을 더 닦아야 할듯.... 지 못미...OTL 지원 브라우져는 크롬, 사파리, 파폭입니다. 그런데 파폭에서는 좀 뭔가 이상하네요^^;; canvas함수를 이용하는것이라서 ie는 쿨하게 패쓰!!! 아이폰에서 해보세요~~^^ 암튼 소스를 이렇습니다 데 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Progma" content="on-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" /> <style type="text/css"> #stage { border:1px #DDD solid; } #link{ text-align:center; border:2px solid; border-color:red; } #closed{ border:1px solid; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var started = false; var canvas, context; //초기화 함수 function init(){ canvas = document.getElementById('stage'); context = canvas.getContext('2d'); started = false; //아이폰인지 판별 var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0){ canvas.addEventListener('touchstart', function(e){ context.beginPath(); context.moveTo(e.targetTouches[0].pageX - 8, e.targetTouches[0].pageY - 8); started = true; }); canvas.addEventListener('touchmove', function(e){ if(started == true){ e.preventDefault(); context.lineTo(e.targetTouches[0].pageX - 8, e.targetTouches[0].pageY - 8); context.stroke(); } $("#debug").html(e.targetTouches[0].pageX + "/ " + e.targetTouches[0].pageY ); }); canvas.addEventListener('touchend', function(e){ if(started == true){ started = false; } }); }else{ canvas.onmousedown = function(e){ context.beginPath(); context.moveTo(e.clientX - 8, e.clientY - 8); started = true; }; canvas.onmousemove = function(e){ if(started == true){ context.lineTo(e.clientX - 8, e.clientY - 8); context.stroke(); } }; canvas.onmouseup = function(e){ if(started == true){ started = false; } }; }//end else };//end init(); //이미지 추출 function ExtractImage(){ var strDataURI = canvas.toDataURL("image/jpeg"); //이미지 데이타를 전송후 php에서 이미지로 저장 $.ajax({ type: "POST", url : "ExtractImage.php", data : { data : strDataURI }, success : function(data){ $("#image").html(data); $("#image").append('<img src="' + strDataURI + '">'); $("#link").css({ "display" : "block" }); } }); } $(function(){ init(); //초기화실행 //클릭시 레이어 닫기 $("#closed").click(function(){ $("#link").css({ "display" : "none" }); $("#image").html(""); }); }); </script> </head> <body> <div id="container"> <canvas id="stage" width="300" height="270"></canvas> </div> <a href="javascript:ExtractImage();">이미지출력</a> <a href="javascript:document.location.reload();">초기화</a> <br><br> <div id="link" style="display:none;"> <div id="image"> </div> <span id="closed">닫기</span> <br><br> </div> <div id="debug"></div> </body> </html> 이미지를 저장하는쪽은 //해당 이미지 저장 session_start(); $name = session_id(); $dataurl = str_replace(" ", "+", $_POST["data"]); $data = substr($dataurl, strpos($dataurl , ",")); $file = fopen("./image/".$name.".jpg", "wb"); fwrite($file, base64_decode($data)); fclose($file); echo "<br><a href=\"http://drst3in.potatoweb.net/iphone/image/".$name.".jpg\"> 이미지 다운로드 </a>"; -------------------------------------------------------------------------------- 누 가 ocr좀 하는 사람있으면 좀해줘~~~~ 데모는 http://drst3in.potatoweb.net/iphone |
|||||
|
|||||
전체댓글수 8
-
게시물 13,194건
1 2 3 4 5 6 7 8 9 10 
