Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

번역된 텍스트 이미지 형태로 저장하기 #2

Closed
hermes-j opened this issue Nov 30, 2022 · 9 comments
Closed

번역된 텍스트 이미지 형태로 저장하기 #2

hermes-j opened this issue Nov 30, 2022 · 9 comments
Labels
enhancement New feature or request

Comments

@hermes-j
Copy link
Owner

hermes-j commented Nov 30, 2022 •
edited

역번역?한 후 해당 문자를 이미지로 저장 가능하게 할 것. 직접 캡쳐하기엔 귀찮음
@hermes-j
Copy link
Owner Author

hermes-j commented Nov 30, 2022 •
edited

관련있어 보이는 라이브러리

  • reactjs-text-to-image
  • html2canvas

@hermes-j hermes-j added the enhancement New feature or request label Nov 30, 2022
@hermes-j
Copy link
Owner Author

hermes-j commented Dec 2, 2022 •
edited

html2canvas로 구현 성공, 버그 및 개선점 존재
gt-download (1)

  1. 문자 윗부분이 잘려서 나옴
  2. 텍스트칸 길이에 따라 크기가 달라지기 때문에 다운받는 사진에 공백이 너무 큼
  3. 화질 구림 (많이구린건 아닌데..)
  4. line break 안됨

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 3, 2022 •
edited

개선 방법 생각나는대로

  1. 텍스트칸 그대로 받지 말고 다운로드에 쓰일 텍스트칸 따로 만들기 (display: none;)
  2. 화질의 경우 canvas.toDataURL에 quality 옵션 존재
  3. Textareas don't have user line breaks when screenshotted niklasvh/html2canvas#83 (Inputbox에 textarea 대신 div 사용)

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 3, 2022 •
edited

개선법 해본결과

  1. 화면에 보여야 그걸 다운받을 수 있음. 불가능
  2. 화질 설정해도 변화 없음 어쩔수없는듯
  3. 잘림 문제는 해결됨, 단 공백 문제는 그대로고 화면 레이아웃 많이 망가짐 및 placeholder 사라짐

일단 3번으로 밀고 간다

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 3, 2022

레이아웃 수정, placeholder 복구.

다운로드 정상작동.

keybutton 말고 inputbox에 직접 입력시 useState가 업데이트되지 않음

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 5, 2022 •
edited

html2canvas에서 html-to-image 라이브러리로 급선회

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 5, 2022 •
edited

gi-translate (1)

사진이 잘리는 거 빼곤 잘됨
진작 이거쓸걸...
글이 짧을 때도 사진이 길게 나오는 문제는 어쩔 수 없을 듯 하다

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 5, 2022 •
edited

gi-translate (1)
영역 잡는 쪽에서 margin을 고려 안하는듯. margin을 삭제하니 깔끔하게 나옴

@hermes-j
Copy link
Owner Author

hermes-j commented Dec 5, 2022 •
edited

3줄 넘어간것도 한번에 저장되게 하려면 텍스트칸 크기 조절이 필요함.
일단 resize: none; 풀어두고 autosize 방법을 찾아보자

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hermes-j