본문 바로가기 메뉴 바로가기

꿀벌개발일지

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

꿀벌개발일지

검색하기 폼
  • 분류 전체보기 (695)
    • Daylogs (695)
      • AI (10)
      • 생각_경험 (3)
      • 개발뉴스 (2)
      • 책 (1)
      • AWS (3)
      • Javascript (237)
      • HTML (24)
      • Nginx (26)
      • Git (27)
      • Xcode (9)
      • iOS (18)
      • Java (74)
      • C (13)
      • Python (28)
      • DB (39)
      • Unix (50)
      • Security (6)
      • Logic (10)
      • Spring (4)
      • Etc (87)
      • Web (4)
      • UX (12)
      • DevTip (5)
      • Docker (2)
  • 방명록

Canvas (1)
캔버스 복사하기

발생일: 2011.08.22 문제: 가벼운 팀 프로젝트로, 웹소켓과 캔버스를 이용해 동시에 그림을 그릴 수 있는 그림판 같은 걸 만들어보고 있다. 중간에 접속한 유저가 기존에 그려진 데이터를 뿅~ 받아볼 수 있는 동기화 기능이 필요했다. 이미 그려진 캔버스를 복사하려면 어떻게 하지? 해결책: 아래와 같은 순서로 처리하면 된다. 1. base64로 인코딩 된 데이터를 가져온다. 2. 이미지 객체를 만들어서, 이미지 문자열을 src에 할당한다. 3. 이미지 로드가 완료되면 로드된 이미지로 캔버스를 그린다. 이미지 로드가 완료되기 전 복사를 시도하면, 빈 이미지로 캔버스를 그리는 것과 같게 되기 때문에 아무 일도 일어나지 않으니 주의한다. 샘플 코드: // 이미지 데이터를 가져온다. var imageData ..

Daylogs/Javascript 2011. 8. 22. 18:49
이전 1 다음
이전 다음
공지사항

Blog is powered by Tistory / Designed by Tistory

티스토리툴바