echart canvas to image external download - 이미지 다운로드

echat 사용시 차트를 이미지로 저장 시 옵션에 있는 기능을 사용할 수 있지만

외부 디자인에 넣으려고 할 때도 있다. 찾아보면

 

아래와 같은데 이는 조금 문제가 있다. 확장으로 이미지를 디자인식으로 올린 경우 저장이 동일하게 되지 않는다. 

 // Get canvas information
    let canvas = document.getElementsByTagName("canvas");
    if(canvas&&canvas.length>0){
        // create label
        let tempA = document.createElement("a");
        // Set download name
        tempA.download = "echarts download" +".png";
        // Set address and file type
        tempA.href = canvas[0].toDataURL("image/png");
        document.body.appendChild(tempA);
        // Trigger download event
        tempA.click();
        // Remove Tag
        tempA.remove();
     }

따라서 온전히 저장을 하기 위해서는 echat  내부 api를 사용해야 한다.  

/**
 * @param flNm			저장 파일명 확장자 포함
 * @param chartObj		차트 오브젝트명
 * @param pixelRt		저장 이미지 비율 default 1(1:1)
 * @returns
 */
function downloadURI(flNm, chartObj, pixelRt = 1) {
    var tempA = document.createElement("a");
    tempA.download = flNm ;
    //address 설정하고 파일의 타입 정하기
    tempA.href = chartObj.getDataURL({
        pixelRatio: pixelRt
    });
    document.body.appendChild(tempA);
    //클릭 다운로드 이벤트
    tempA.click();
    //태그를 제거합니다
    tempA.remove();
}

함수로 만들어 보았다.  내부 함수를 이용하면 온전히 이미지로 저장이 가능하다.