저장소

이미 선언된 변수를 리터럴로 변경하는 방법 배열을 리터럴로 변경하기 // typeof로 간단하게 할 수 있다 const array = ['a', 'b', 'c'] as const // 결과물 type ArrayType = "a" | "b" | "c" type ArrayType = typeof array[number] 배열을 as const을 붙여 타입 추론을 더 정확하게 한뒤 typeof로 배열의 index(number)를 넣어주면 간단하게 할 수있다 객체의 key 또는 value를 리터럴로 변경하기 // keyof typeof로 간단히 할 수 있다 const object = { test1: 'aaa' test2: 'bbb' test3: 'ccc' } as const // 결과값 type ObjectTy..

typescript 2023. 8. 21. 22:05

목적 이번 포스팅에는 기존에 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

추후 포스팅할 fabric js를 사용하여 이미지 에디터를 제작하던중 타입스크립트 에러가 출력되었다 🤔 뭔가 이상하니 document를 살펴보자 fabric js의 document에서는 다음과 같이 사용할 수 있다고 나와있다 타입이 지정되어 있지 않은지 확인하기 위해 @types/fabric을 살펴보니 interface IAllFilters 의 하위의 각각 Blur와 HueRotation이 별도로 선언되어있지 않았다 타입이 누락된 이유는 모르겠지만 자료형이 정의되고 패키지가 업데이트된 것이 반영되지 않아서 빠졌을 수도 있고, 단순 누락되었을 수도 있다 타입스크립트를 사용할때 패키지 내부에 포함되어있지 않고 @types로 추가되는 ts디펜던시는 많은 개발자가 기여하여 만들어진 경우가 대부분이다 그에 대한 ..

카테고리 없음 2023. 3. 19. 13:49

javascript에서 import 하여 이미지를 불러오거나 input file에서 이미지를 업로드 할 때 file이 아닌 이미지의 정보를 일부 활용하고 싶을때가 있다 그럴때 우선 readfile을 활용하여 파일을 읽은 뒤, new Image()로 이미지의 정보에 접근하여 활용하는 방법이다. 이때 각각 동작을 비동기로 처리하고 한번에 후처리 하도록 하였다 new FileReader() 우선 파일을 read 함수를 만들어준다 async function readFile (file: File) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = async (event) => resolve(event..

카테고리 없음 2023. 3. 19. 13:47