jotasic / blogpostimagemaker

간단한 블로그 포스트 이미지를 만들 수 있는 page

Blog

• velog

blogpostimagemaker's Issues

Canvas를 svg로 변경

단순한 이미지를 만드는 작업이기 때문에, Canvas보다는 SVG로 활용하는 것이 좋다고 하여 변경 하기로 함.

Canvas vs SVG

다운로드 기능 추가

현재 캔버스 우클릭으로 하여 다운로드가 가능한 사항
버튼을 클릭해서 다운로드 할 수 있도록 해야됨.

javascript 관련 테스트 프레임 워크 조사

이미지 클립보드 복사기능 추가

Web Storage를 적용

쿠키를 이용해서 가장 마지막에 입력한 내용을 다음번 방문 시, 사용할 수 있도록 기능 추가

CSS 적용 - Semantic UI

https://semantic-ui.com/

폰트 및 배경 색에 대한 랜덤 설정 기능 추가

파일 분리

html 파일에 있는 자바스크립트 코드를 새로운 파일로 분리

클립보드 저장 및 다운로드 기능 안되는 안되는 브라우져로 접속시 구분 가능하도록 처리

해당 버튼 비 활성화 하고 message 띄우기

SVG 크기가 설정 픽셀 보다 작아도 정상동작 되도록 수정

CSS 적용시( #16) SVG를 원하는 크기 만큼 늘릴 수 없기 때문

폰트 설정 기능 추가

각 속성창에 유효하지 않은 값들을 입력하지 못하도록 수정

현재 이미지 크기나, 폰트사이즈 같은 설정 부분의 값들이 '-'도 입력 가능함.
입력단에서 유효하지 않은 값들이 입력되지 않도록 수정 작업 진행

색상 붙여넣기 기능

컬러를 매번 타이핑 하는 것이 귀찮음

1. 버튼을 만들어서 현재 클립보드에 있는 Data가 컬러 형식이면 붙어넣기 되도록 추가
2. Data가 컬러 형식이 아니면 붙어넣기 않하고 토스트 메시지 띄우기

방문자 수 카운드 기능 추가

아래 서비스 이용해서 적용
https://hits.seeyoufarm.com/

fillTextLine() 인자 수정

수정하려는 이유

fillTextLine() 내에서 fontSize를 알아 낼 수 있는데, 인자로 받을 이유가 없을 듯 하다.
인자로 받는 부분을 수정 한다.

    function fillTextLine(context, text, x, y, fontSize) {

수정 방향

1안 - 인자로 받은 context를 이용하여, size를 구한다.
2안 - 전역으로 선언되어 있는 fontSize Element를 이용한다.