logo image
메인
기술
HOME
기술

canvas context2D 에서 getImageData 사용을 자제하자.

new
목록
#canvas
getImageData  는 느리다
이미지 크기가 크면 큰 만큼 느리다.

canvas clone 작업 시
ctx.putImageData(ctx0.getImageData(),0,0)
처럼 할 경우 
비번한 호출 시 웹 페이지의 프레임 드롭이 발생할 정도로 느려질 수 있다.

대시하여
ctx.save();
ctx.globalAlpha = 1,
ctx.globalCompositeOperation = "source-over",
ctx.drawImage(ctx0,0,0);
ctx.restore();
처럼 처리하였음.


느린 이유는
GPU -> CPU로 getImageData 는 너비x높이x4Bytes 의 데이터가 전송 된다. ( 1920 × 1080 × 4bytes ≈ 8MB )
하드웨어 가속이 적용 안된다고 한다.

drawImage 는 하드웨어 가속이 동작하고
GPU -> GPU 처리라서 (GPU 내부 동작) 빠르다고 한다.


CPU와 GPU는 동작을 각각하고 메모리 영역도 각각 관리하기 때문에 서로간의 데이터 전송시 무서운 듯


목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
10.26
10.27
UI timeline
10.28
10.29
10.30
ui-boardgame
10.31
11.1
11.2
11.3
11.4
11.5
11.6
11.7
11.8
11.9
11.10
canvas context2D 에서 getImageData 사용을 자제하자.
11.11
11.12
11.13
11.14
11.15
11.16
11.17
11.18
11.19
11.20
11.21
11.22
11.23
11.24
11.25
11.26
11.27
11.28
11.29
11.30
12.1
12.2
12.3
12.4
12.5
12.6
tag