페이지 이력

page no. 

1. 기능 설명

a. 업로드 단계에서 용량을 축소해 저장할 수 있도록 Matrix.ShowImageEditor API를 통해 표시되는  이미지 API로 오픈하는 이미지 에디터에 「압축 용량」 입력 필드가 추가되었습니다.

※ 참고: Image 컨트롤로 서버에 이미지를 등록·변경하는 일반 흐름은 이미지 변경하는 방법 가이드를  참고해 주십시오.

b. 이미지 에디터에 붙여넣은 이미지를 삭제하거나 교체할 수 있는 기능도 추가되었습니다추가되었습니다.

2. 주요 기능

a. 화면 설명

[이미지 에디터 화면 추가]

「압축 용량」 입력 필드 추가

• Matrix.ShowImageEditor API를 호출하여 이미지 에디터 팝업을 오픈하는 경우에만 압축 용량 입력 필드가 노출됩니다.
• Image 컨트롤의 이미지 선택 팝업 내 [클립보드 복사]에서 열리는 이미지 에디터는 「압축 용량」 입력 필드가 제공되지 않습니다.

Image Added

b. 그 외 기능

• 이미지 삭제·교체 기능은 Matrix.ShowImageEditor API, Image 컨트롤의 이미지 선택 팝업 내 [클립보드 복사] 에서 공통으로 동작합니다.

3. 이미지 압축

a. 보고서에서 ScriptEditor를 열어,  에디터 열기

아래 예시는 업로드용 버튼(아래 예시의 BTN_UPLOAD)의 클릭 이벤트에서 Matrix.ShowImageEditor API를 호출하여 이미지 에디터를 엽니다.

띄우는 패턴입니다.

• • i-AUD 보고서에 업로드용 버튼(예: BTN_UPLOAD)을 배치한 후, ScriptEditor에서 해당 버튼의 OnClick 이벤트에 Matrix.ShowImageEditor API 호출 코드를 작성합니다. 
  • 보고서 실행 후 사용자가 버튼(예: BTN_UPLOAD)을 클릭하면 이미지 에디터 팝업이 열립니다.

b. 클립보드에 복사된 이미지를 Ctrl+V 로 붙여 넣고, 「압축 용량」 입력 용량」 입력 필드 우측에 표시된 현재 이미지의 용량을 확인합니다.

[이미지 붙여넣고 현재 이미지 용량 부분 이미지 추가]Image Added

c. 필요 시 「압축 용량」 값을 입력하고 미리보기에서 결과를 확인합니다. 

Image Added

d. 「압축 용량」 값이 0보다 큰 상태에서 [저장] 버튼을 클릭하여 업로드합니다.

을 누르면, 미리보기에 보이는 압축 이미지로 업로드할지 묻는 확인창이 표시됩니다. [예] 선택 시 미리보기 상태 그대로 업로드됩니다.

4. 이미지 삭제

Image Added

a. 이미지 에디터에 이미지가 표시된 상태에서 이미지를 클릭 이미지 영역(미리보기 영역)을 클릭하여 포커스를 둔 후 Delete 키를 누르면 "이미지를 삭제하시겠습니까?" 확인창이 표시됩니다.

b. [예] 선택 시 화면이 초기 상태로 돌아가고, 입력 값도 함께 초기화됩니다.파일명·「압축 용량」 값(0)·우측 원본 용량 표시가 모두 초기 상태로 돌아갑니다.

• • • 단, 텍스트 입력란에 커서가 있을 때 는 해당 입력 란의 때는 이미지 삭제가 아니라 해당 입력란의 문자가 지워집니다.이미지를 삭제하려면 반드시 이미지 영역을 먼저 클릭해 포커스를 옮긴 뒤 Delete 키를 누르십시오.

5. 이미지 교체

Image Added

a. 이미지 에디터에 이미지가 표시된 상태에서 다른 이미지를 클립보드에 복사한 후, 이미지 영역을 클릭하고 Ctrl 영역(미리보기 영역)을 클릭하여 포커스를 둔 후 Ctrl + V 를 누르면 새 이미지로 즉시 교체됩니다.

b. 이미지 교체 시 「압축 파일명·「압축 용량」 값은 0 으로, 값(0)은 초기 상태로 돌아가고, 우측의 원본 용량 표시는 새 이미지 기준으로 갱신됩니다.

Matrix.ShowImageEditor(function (p) {
	// callback function
	// p.FolderName;
	// p.ImageName;
	// p.ImageWidth;
	// p.ImageHeight;
});