# 도형을 이미지로 내보내기

## Content

SpreadJS는 기본 도형, 커넥터 도형, 사용자 정의 도형, 카메라 도형, 스파크라인, 텍스트 상자 도형과 같은 다양한 도형을 이미지 소스로 내보내는 기능을 제공합니다. 또한, [양식 컨트롤](/spreadjs/docs/v18/features/UnderstandingShapes/form-controls) 도형도 이미지로 내보낼 수 있습니다. 단, ListBox 컨트롤의 경우 현재 스크롤된 영역만 내보내지며, comboBox 컨트롤의 드롭다운 영역은 내보낼 수 없습니다.
도형이나 도형 기반 객체를 삽입한 후에는 `shape.toImageSrc()` API를 사용하여 이미지 소스를 얻을 수 있습니다.

### 코드 사용

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

```javascript
 // 도형 추가
 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)가 다르면 내보내는 이미지의 크기도 달라질 수 있습니다.

| 설정 | 내보내진 이미지 |
| --- | -------- |
| 선 굵기 = 1 | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.7d4ff7.png) |
| 선 굵기 = 40 | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.d99f16.png) |

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

### **SpreadJS 디자이너 사용**

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

1. 워크시트를 엽니다.
2. 원하는 도형을 삽입합니다.
3. 도형을 마우스 오른쪽 버튼으로 클릭하고 \*\*그림으로 저장(Save as Picture)\*\*을 선택합니다.
<br>
    ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.2104ec.png?width=350)
<br>
4. 이미지를 저장할 위치를 선택합니다.
5. 파일 이름을 입력하고 **저장(Save)** 을 클릭합니다.

>type=warning
> **참고 사항:**
>
> * 현재 내보내는 파일 포맷은 PNG입니다. 기본 파일 이름은 도형의 이름이 사용됩니다. 예: `chord 1`.
> * 여러 도형이 선택된 경우, 함께 내보내지며 기본 파일 이름은 `SpreadShapes`로 설정됩니다.