Canvas API의 ctx.filter 속성으로 라이브러리 없이 이미지 블러 처리 가능함

Context

브라우저에서 이미지 블러를 구현하려면 외부 라이브러리가 필요하다고 여겨지지만, Canvas 2D API의 filter 속성으로 이를 대체할 수 있음. large blur radius에서 이미지가 transparent/black로 페이드되는 edge bleeding 문제가 발생함.

Technical Solution

• Canvas ctx.filter: blur(Xpx) CSS 문법을 그대로 적용하여 drawImage 호출 전 설정함
• Edge bleeding fix: blurRadius * 2 오버플로우 값으로 이미지를 더 크게 그린 후 canvas 경계로 클리핑함
• Live preview: CSS filter: blur() 적용으로 GPU 가속 실시간 미리보기 구현함
• File loading: FileReader.readAsDataURL로 base64 데이터 URL 생성 후 HTMLImageElement에 로드함
• Download: canvas.toDataURL(fileType, 0.95)로 원본 형식 유지하여 다운로드 처리함

Impact

실시간 미리보기는 slider 드래그 중 60fps 업데이트 가능함. 외부 의존성 없이 모든 처리가 브라우저 내에서 완료됨.

Key Takeaway

Canvas API의 filter 속성 한 줄로 이미지 블러 구현 가능함. 엣지 페이딩 문제는 이미지를 오버사이즈로 그리고 클리핑하는 방식으로 해결함. 미리보기용 CSS filter와 다운로드용 Canvas를 분리하여 각각 최적화된 방식 사용함.