Canvas 2D · 23 내보내기와 원본 데이터
단계: 접근성·입자·성능 검증 · 편집 가능한 예제 · 저장 ID: canvas-2d-step-23
목표와 학습 후 역량
- PNG와 JSON의 용도를 구별한다.
- 잘못된 가져오기 후 기존 작업이 남는다.
선수 지식
선수 개념: 대체 표현, 공통 명령. 22단위의 결과 파일과 관찰 기록을 준비하세요.
핵심 개념과 설명
래스터 내보내기
toBlob은 현재 픽셀을 이미지로 만듭니다. 다시 편집하려면 도형의 원본 데이터도 별도로 저장해야 합니다.
직렬화 검증
JSON 입력에는 누락되거나 잘못된 좌표가 있을 수 있습니다. 유효성 검사 뒤 장면으로 변환해야 화면이 손상되지 않습니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. 브라우저 버전과 viewport, DPR을 기록하세요.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 실습 프로젝트의 day-23.js와 index.html을 준비하세요. toBlob으로 PNG 다운로드를 만들고 도형 배열을 JSON으로 저장하세요.
- JSON 파일을 읽어 id·유한 좌표·색 필드를 검사한 뒤 renderScene에 전달하세요.
- 입력 조건 유효 좌표에서 출력을 저장한 뒤 x에 문자열 조건으로 다시 실행하세요. 예상: 잘못된 데이터는 거부되고 기존 장면은 유지됩니다. 실제 화면·로그와 대조하고 day-23-notes.md에 실제 결과와 차이의 원인을 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 입력 JSON | 유효 좌표 | x에 문자열 | 잘못된 데이터는 거부되고 기존 장면은 유지됩니다 |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- PNG와 JSON의 용도를 구별한다.
- 잘못된 가져오기 후 기존 작업이 남는다.
자가 점검
- toDataURL보다 toBlob을 고려하는 이유는 무엇인가요?
- 외부 이미지로 오염된 canvas는 내보내기에 어떤 영향을 주나요?
공식 참고
연결된 예제와 실행 범위
PNG는 미리보기로 생성하고 JSON은 입력란으로 가져옵니다. 파일 다운로드는 iframe 정책에 따라 외부 환경이 필요할 수 있습니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 접근 가능한 캔버스 조작 · 다음: 입자 상태와 방출