저장소

목적 이번 포스팅에는 이미지 에디터의 필수기능인 필터 기능을 구현해보도록 한다 interface // 컬러매트릭스 필터 interface FilterColormatrix { name: string filter: fabric.IBaseFilter } // 블랜드모드 parameter interface BlendOptions { mode?: BlendMode color?: string alpha?: number } // 블랜드모드 타입 type BlendMode = 'add'|'diff'|'subtract'|'multiply'|'screen'|'lighten'|'darken'|'overlay'|'exclusion'|'tint' 컬러매트릭스에 사용될 FilterColormatrix를 선언해주고 name과 fi..

fabric.js 2023. 3. 31. 18:30

목적 이번 포스팅에는 기존에 canvas를 resize하는 방법이 아닌 canvas의 일부를 잘라서 적용하는 crop 기능을 만들어보도록하자 캔버스에 svg 이미지를 삽입한다(이미지 로드기능 생략용) 이때 이미지는 크기나 위치를 컨트롤 할 수 없게한다 드래그 혹은 정의된 비율로 crop 박스를 생성한다 드래그 박스는 자유크기, 비율 박스는 비율에 맞게 크기조절을 한다 이때 드래그 혹은 크기를 변경할때 총 canvas의 넓이를 벗어나지 않게한다 이번에도 동일하게 클래스로 생성하지만 전역변수와 함수로도 충분히 구현할 수 있다 Reference base64로 인코딩된 문자열을 불러올 수도 있지만 이번에는 svg태그에서 문자열을 추출하여 canvas에 예제이미지를 넣어보도록 하자 사용된 이미지는 다음과같다 sv..

fabric.js 2023. 3. 20. 16:40

목적 이번 포스팅에는 canvas에 객체를 삽입하는 기능을 만들도록 하자 이때 특정 위치에 객체를 생성해버리면 크기조정을 다시 해야하기 때문에 드래그로 생성하도록 하자 이번 포스팅에서 만들 내용은 fabric.js의 기본 클래스인 Rect, Ellipse, Triangle, IText을 사용하고 커스텀 도형은 Polygon를 사용한다 버튼을 클릭하여 객체를 준비하고 드래그하여 캔버스에 그린다 객체를 그리고 mouse up 순간 새로 그려진 객체를 선택한다 객체의 선굵기, 선색깔, 채움색깔을 선택 혹은 변경할 수 있다 버튼 -> 드래그 -> 종료 순서를 반복해야하기 때문에 shape는 클래스로 작성을 하고 이 포스팅에서는 static, private 없이 심플하게 작성해보자 Class interface와 ..

fabric.js 2023. 3. 19. 14:01

목적 fabric.js 와 svelte를 사용하여 이미지 에디터를 만들어 보았는데 그 과정을 정리할 필요성을 느끼게 되었다. 이 포스팅에서는 svelte는 제외한 typescript위주로 각각 기능의 제작과정을 정리할 예정이다. 이번 포스팅에서는 간단하게 input file change 또는 드래그 앤 드롭으로 에디터에 사용할 이미지를 캔버스에 넣어보도록하자 Interface CustomCanvas interface CustomCanvas extends fabric.Canvas { imageSize?: { width: number height: number } cornerSize?: number imagePath?: string } 우선 fabric의 기본으로 정의된 member이외의 별도의 데이터를 추..

fabric.js 2023. 3. 19. 13:55