Chart.js toBase64Image() 함수가 빈 PNG 이미지를 반환할 때 해결 방법

toBase64Image() 호출 시 빈 이미지가 나오는 이유

Chart.js에서 toBase64Image() 함수를 사용해 차트를 PNG 이미지로 변환할 때, 빈(투명한) 이미지가 출력되는 문제가 발생할 수 있습니다.

이 문제의 주된 원인은 차트의 렌더링 애니메이션이 아직 완료되지 않은 상태에서 toBase64Image()를 호출하기 때문입니다. 캔버스에 그래프가 완전히 그려지기 전에 이미지로 변환하면 내용이 없는 결과물만 얻게 됩니다.

해결 방법 1: animation 옵션의 onComplete 콜백 활용

차트 생성 시 animation 옵션에 onComplete 콜백을 등록하면, 애니메이션이 모두 끝난 후에 이미지 변환 작업을 수행할 수 있습니다.

animation: {
    duration: 2000,
    onComplete: function (animation) {
        this.toBase64Image();
    }
}

위 코드처럼 설정하면 2초 동안 진행되는 애니메이션이 종료되는 시점에 자동으로 toBase64Image()가 호출되어, 완성된 차트 이미지를 정상적으로 얻을 수 있습니다.

해결 방법 2: onAnimationComplete 콜백과 별도 함수 조합

또 다른 방법은 추가적인 콜백을 통해 save64Img(myChart.toBase64Image())를 호출하고, 아래와 같이 구성하는 것입니다.

myLine = {
    onAnimationComplete: function () {
        save64Img(myChart.toBase64Image());
    }
}

이 방식은 애니메이션 완료 시점에 myChart.toBase64Image()의 결과값을 save64Img라는 별도의 처리 함수로 전달하여 이미지를 저장하거나 활용하는 패턴입니다.

정리

핵심은 애니메이션이 끝나기 전에는 캔버스가 완전히 렌더링되지 않는다는 점입니다. 따라서 onComplete 또는 onAnimationComplete 같은 완료 콜백 안에서 toBase64Image()를 호출하면 빈 이미지 문제를 확실하게 해결할 수 있습니다.