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();
}
함수로 만들어 보았다. 내부 함수를 이용하면 온전히 이미지로 저장이 가능하다.
'개발하기 > 웹개발도움' 카테고리의 다른 글
공공데이터 공통표준용어 5차 2022-07 (0) | 2022.08.12 |
---|---|
전자정부프레임워크4.0 Log4JdbcCustomFormatter 적용 (0) | 2022.07.26 |
이미지 목록을 통한 동영상 파일 생성 - jcodec/Spring(전자정부) (0) | 2021.10.28 |
네이버 지도 API 사용시 거리뷰 기능 오류 (0) | 2020.06.10 |
RabbitMQ 설치 간단 매뉴얼 - CentsOS 7.x (0) | 2020.02.26 |