# 이미지 스파크라인
## Content
셀에 이미지를 삽입하려면 SpreadJS의 **Image 스파크라인**을 사용할 수 있습니다. 이 스파크라인 함수는 다양한 표시 모드(display mode)를 통해 이미지 크기를 조정하여 표시할 수 있습니다.
이미지 스파크라인 함수에는 다음과 같은 인수가 있으며, `source`만 필수 인수입니다:
| 인수 | 설명 |
| --- | --- |
| **source** | 이미지 파일의 URL 경로입니다. "https" 프로토콜을 사용해야 합니다. |
| **[alt\_text]** | 접근성을 위한 이미지 설명 텍스트입니다. 이 인수는 셀 필터 및 찾기 기능을 지원합니다. |
| **[sizing]** | 이미지 크기를 다음과 같이 지정합니다:
0 - 셀에 맞게 비율을 유지함
1 - 이미지를 셀 전체로 늘림
2 - 셀 경계를 초과하더라도 원본 이미지 크기를 유지함
3 - height 및 width 인수를 사용하여 이미지 크기를 사용자 지정함
기본값은 0입니다. |
| **[height]** | 이미지의 사용자 지정 높이(px 단위)입니다. |
| **[width]** | 이미지의 사용자 지정 너비(px 단위)입니다. |
| **[clipX]** | 대상 컨텍스트에 그릴 원본 이미지의 부분 사각형의 왼쪽 위 모서리의 x축 좌표입니다.
기본값은 0입니다. |
| **[clipY]** | 대상 컨텍스트에 그릴 원본 이미지의 부분 사각형의 왼쪽 위 모서리의 y축 좌표입니다.
기본값은 0입니다. |
| **[clipHeight]** | 대상 컨텍스트에 그릴 원본 이미지의 부분 사각형의 높이입니다.
기본값은 이미지의 높이입니다. |
| **[clipWidth]** | 대상 컨텍스트에 그릴 원본 이미지의 부분 사각형의 너비입니다.
기본값은 이미지의 너비입니다. |
| **[vAlign]** | 이미지의 수직 정렬 방식입니다:
0 - 위
1 - 가운데
2 - 아래
기본값은 2(아래)입니다. |
| **[hAlign]** | 이미지의 수평 정렬 방식입니다:
0 - 왼쪽
1 - 가운데
2 - 오른쪽
기본값은 0(왼쪽)입니다. |
Image 스파크라인 수식의 형식은 다음과 같습니다:
`=IMAGE(source, [alt_text], [sizing], [height], [width], [clipX], [clipY], [clipHeight], [clipWidth], [vAlign], [hAlign])`
>type=warning
> **참고:**
>
> * 이미지의 `source`는 URL 또는 base64 문자열일 수 있습니다.
> * SpreadJS는 Excel에서 이미지 함수의 가져오기 및 내보내기를 지원합니다. 단, `source`가 base64일 경우 가져오기/내보내기는 비활성화됩니다.
> * Excel로 내보낼 때 `[clipX]`, `[clipY]`, `[clipHeight]`, `[clipWidth]`, `[vAlign]`, `[hAlign]` 등의 일부 매개변수는 무시됩니다.
## **사용 사례 시나리오**
다음 예제에서는 **전 세계 인구가 가장 많은 10개 국가의 목록**이 표시되며, 각 국가의 국기 이미지는 웹 URL을 통해 `IMAGE` 스파크라인 함수를 사용해 삽입됩니다.
```javascript
// Spread 초기화
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
// 시트 가져오기
var sheet1 = spread.getSheet(0);
// sheetAreaOffset 옵션 설정
sheet1.options.sheetAreaOffset = { left: 1, top: 1 };
// gridlines 숨기기
sheet1.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
// 행/열 헤더 숨기기
sheet1.options.colHeaderVisible = false;
sheet1.options.rowHeaderVisible = false;
// 데이터 배열 설정
sheet1.setArray(1, 1, Top10_CountryPopulation);
// 셀에 값 설정
sheet1.setValue(1, 0, "Flag", GC.Spread.Sheets.SheetArea.dataArea);
sheet1.setValue(0, 0, "Top 10 Populated Countries", GC.Spread.Sheets.SheetArea.dataArea);
// 헤더 열 정렬 설정
sheet1.getRange(-1, 0, -1, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.addSpan(0, 0, 1, 5, GC.Spread.Sheets.SheetArea.dataArea);
// sheet1에 테이블 추가
sheet1.tables.add('tablePopulation', 1, 0, 11, 5);
// 열 너비 설정
sheet1.setColumnWidth(0, 70);
sheet1.setColumnWidth(1, 100);
sheet1.setColumnWidth(2, 80);
sheet1.setColumnWidth(3, 150);
sheet1.setColumnWidth(4, 150);
// 행 높이 설정
sheet1.setRowHeight(0, 40);
for (var i = 2; i < 12; i++)
sheet1.setRowHeight(i, 30);
// 셀에 Image 함수 수식 설정
sheet1.setFormula(2, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/23px-Flag_of_the_People%27s_Republic_of_China.svg.png")');
sheet1.setFormula(3, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg")');
sheet1.setFormula(4, 0, '= IMAGE("https://previews.123rf.com/images/auttkhamkhauncham/auttkhamkhauncham1507/auttkhamkhauncham150700090/42304741-usa-flag.jpg")');
sheet1.setFormula(5, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg")');
sheet1.setFormula(6, 0, '= IMAGE("https://static.vecteezy.com/system/resources/previews/000/114/048/non_2x/free-vector-pakistan-flag.jpg")');
sheet1.setFormula(7, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg")');
sheet1.setFormula(8, 0, '= IMAGE("https://i.pinimg.com/originals/73/22/94/732294310c7e9fa3da611030168923fb.jpg")');
sheet1.setFormula(9, 0, '= IMAGE("https://images-na.ssl-images-amazon.com/images/I/31V23jzzMgL._AC_.jpg")');
sheet1.setFormula(10, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/1200px-Flag_of_Russia.svg.png")');
sheet1.setFormula(11, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/2/20/Flag_of_Mexico_1917.png")');
// 0번째 행 스타일
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 24px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet1.setStyle(0, 0, style1, GC.Spread.Sheets.SheetArea.dataArea);
//1번째 헤더 행 스타일 설정
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 14px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
for (var i = 0; i < 5; i++)
sheet1.setStyle(1, i, style1, GC.Spread.Sheets.SheetArea.dataArea);
// 남아있는 행 스타일
var style2 = new GC.Spread.Sheets.Style();
style2.backColor = "#EDFDF4";
for (var i = 0; i < 5; i++)
for (var j = 2; j < 12; j++)
sheet1.setStyle(j, i, style2, GC.Spread.Sheets.SheetArea.dataArea);
sheet1.getCell(2, 3).formatter("##,##,##0");
// dataArea 셀 테두리 설정
sheet1.getRange("A2:E12").setBorder(
new GC.Spread.Sheets.LineBorder("white", GC.Spread.Sheets.LineStyle.thin),
{ top: true, bottom: true, left: true, right: true }, GC.Spread.Sheets.SheetArea.dataArea);
spread.resumePaint();
```
## 제한 사항
URL이 크로스 도메인 URL인 경우, SpreadJS는 이미지 정보를 수집할 수 없으며 Excel로 내보낼 때 이미지를 표시하지 않습니다. Excel에서 이미지를 요청하려면 셀을 편집해야 합니다.