[HTML5]canvas 데이터 처리

• 개요
• 본 문서는 HTML 태그 요소 중 하나인 <canvas>의 데이터 핸들링에 대한 간략한 소개 문서이다.
• canvas에 그러진 이미지 정보의 추출과 추출된 데이터를 통해 다시 canvas 이미지로의 변환을 소개한다.
• 추출/변환되는 데이터는 text기반의 타입이다.
  
• 예제 소개(기존 단말 샘플 예제)

1. 이전에 저장된 데이터가 존재하며, 그 데이터를 다시 로드하겠는지 여부 확인
   




2. 저장된(단말의 Preference에 저장된) 데이터를 canvas에 로딩.
   
   
   
• 소드 코드 소개

1. canvas 이미지를 text기반의 데이터로 저장
   [html]
   <canvas id="canvasSignature" width="200px" height="100px" style="border:1px solid #000000; margin:5px"/>
   
   [js]
   var sigCanvas = document.getElementById("canvasSignature");
   sigCanvas.toDataURL();
   
   [sigCanvas.toDataURL(); 결과값]
   
   
2. 저장된 text기반의 데이터를 canvas로 load
   Image 객체를 생성한 뒤, drawImage()
   
   var context = sigCanvas.getContext("2d");
   var image = new Image();
   image.src = eachdata.value;
   image.onload = function(){
   context.drawImage(image, 0, 0);
   }

• 브라우저 테스트
  : 위 샘플코드를 일부 수정하여 캔버스 복사 기능을 pc브라우저에서 테스트 함.
  좌측의 기존 캔버스에 드로잉 입력 후, '회원가입'버튼을 클릭하면 오른쪽 캔버스에 동일한 이미지가 복사되도록 테스트
• 동작 개념 : 좌측 캔버스 드로잉 -> '회원가입' 버튼 클릭 -> 좌측 캔버스에서 base64기반의 텍스트 데이터 추출 -> 오른쪽 캔버스에 해당 텍스트 데이터를 Image객체로 드로잉
• 사파리 테스트 결과(버전 7.1.4(9537.85.13.7))

• IE(11.0.17)