도형을 이미지로 내보내기

SpreadJS는 기본 도형, 커넥터 도형, 사용자 정의 도형, 카메라 도형, 스파크라인, 텍스트 상자 도형과 같은 다양한 도형을 이미지 소스로 내보내는 기능을 제공합니다. 또한, 양식 컨트롤 도형도 이미지로 내보낼 수 있습니다. 단, ListBox 컨트롤의 경우 현재 스크롤된 영역만 내보내지며, comboBox 컨트롤의 드롭다운 영역은 내보낼 수 없습니다.

도형이나 도형 기반 객체를 삽입한 후에는 shape.toImageSrc() API를 사용하여 이미지 소스를 얻을 수 있습니다.

코드 사용

아래의 코드 샘플은 스프레드시트에 있는 도형 객체를 이미지 소스로 저장하는 방법을 보여줍니다.

 // 도형 추가
 var donutShape = sheet.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 100, 50, 150, 150);

// 도형을 이미지 소스로 가져오기
 let shapeImageSrc = sheet.shapes.all()[0].toImageSrc();

일부 도형의 경우, 설정에 따라 내보내는 이미지의 크기가 달라질 수 있습니다. 예를 들어, 커넥터 도형의 선 굵기(line width)가 다르면 내보내는 이미지의 크기도 달라질 수 있습니다.

위 두 도형은 길이는 같지만 선 굵기의 차이로 인해 내보내진 이미지 크기가 서로 다릅니다.

SpreadJS 디자이너 사용

Spread 디자이너에서는 도형을 선택했을 때 그림으로 저장(Save as Picture) 옵션을 제공합니다. 이 옵션을 사용하면 선택한 도형을 이미지로 저장할 수 있습니다.

이미지로 저장하는 단계:

1. 워크시트를 엽니다.

2. 원하는 도형을 삽입합니다.

3. 도형을 마우스 오른쪽 버튼으로 클릭하고 **그림으로 저장(Save as Picture)**을 선택합니다.

   
   

   
   

   
   

4. 이미지를 저장할 위치를 선택합니다.

5. 파일 이름을 입력하고 저장(Save) 을 클릭합니다.