Svelte Image Editor

Svelte로 만들어진 간단하고 유연한 이미지 에디터 컴포넌트입니다. 텍스트 및 이미지 객체를 추가하고, 이동, 리사이즈, 회전, 순서 변경 등 다양한 편집 기능을 제공합니다.

주요 기능

• 객체 추가: 텍스트와 이미지를 캔버스에 추가할 수 있습니다.
• 객체 조작: 객체를 선택하고 이동, 리사이즈, 회전할 수 있습니다.
• 순서 제어: 객체를 맨 앞으로, 앞으로, 뒤로, 맨 뒤로 보낼 수 있습니다.
• 히스토리 관리: 실행 취소(Undo) 및 다시 실행(Redo) 기능을 지원합니다.
• 텍스트 서식: 텍스트의 폰트, 크기, 색상, 정렬 등 다양한 서식을 변경할 수 있습니다.
• 이미지 저장: 편집된 캔버스를 PNG, JPG, SVG 등 다양한 형식으로 저장할 수 있습니다.

설치

npm install svelte-image-editor

사용 방법

<script>
    import ImageEditor from 'svelte-image-editor';

    let imageEditor; // ImageEditor 인스턴스를 바인딩할 변수
    let current_history_index;
    let history_length;

    // 에디터 옵션
    const option = {
        width: 800,
        height: 600,
        scale: 1,
    };

    // 텍스트 객체 추가
    function addText() {
        imageEditor.action('add_text_object');
    }

    // 이미지 객체 추가 (Data URL 또는 이미지 URL)
    function addImage(imageDataUrl) {
        imageEditor.action('add_image_object', imageDataUrl);
    }

    // 실행 취소
    function undo() {
        imageEditor.action('undo');
    }

    // 다시 실행
    function redo() {
        imageEditor.action('redo');
    }

    // 이미지 저장
    async function saveImage() {
        const dataUrl = await imageEditor.action('save', 'png');
        const a = document.createElement('a');
        a.href = dataUrl;
        a.download = 'image.png';
        a.click();
    }
</script>

<div>
    <div class="controls">
        <button on:click={addText}>텍스트 추가</button>
        <button on:click={undo} disabled={current_history_index <= 0}>실행 취소</button>
        <button on:click={redo} disabled={current_history_index >= history_length - 1}>다시 실행</button>
        <button on:click={saveImage}>저장</button>
        <!-- 다른 컨트롤 버튼들 -->
    </div>

    <ImageEditor
        bind:this={imageEditor}
        {option}
        bind:current_history_index
        bind:history_length
    />
</div>

API

Props

Option 객체

option prop으로 다음의 값들을 설정할 수 있습니다.

Methods

bind:this를 통해 컴포넌트 인스턴스를 받아온 후, action 메소드를 사용하여 다양한 기능을 실행할 수 있습니다.

imageEditor.action(type, payload)

라이선스

MIT