나의 첫 JavaScript 웹 앱: 대화형 이미지 좌표 찾기

Full Sail University에서 첫 번째 JavaScript 과정을 마친 후 저는 새로운 기술을 시험해 볼 수 있는 프로젝트에 뛰어들고 싶었습니다. 내 목표는 기능적이고 직관적이며 실용적인 것을 만드는 것이었습니다. 이로 인해 나의 첫 번째 JavaScript 웹 애플리케이션인 Interactive Image Coordinate Finder가 개발되었습니다.

이 앱을 사용하면 사용자는 지도 이미지를 업로드하고, 클릭하여 좌표를 기록하고, 이를 고유한 이름과 선택적 URL이 포함된 레이어로 저장할 수 있습니다. 이 도구를 사용하면 누구나 사용자 정의 이미지를 매핑하거나 주석을 달 수 있으므로 웹 페이지에서 특정 지역이나 랜드마크를 식별하는 시각적 프로젝트에 특히 유용합니다. 이번 포스팅에서는 앱의 기능과 설정, 사용법을 안내해드리겠습니다.

시작하기 전에, 이 또한 작업 프로젝트였다는 점을 중요한 주의사항으로 생각합니다. 제가 근무하는 곳에서는 폐쇄된 네트워크에서 작업하므로 API나 기타 라이브러리를 사용할 수 없습니다. 따라서 이 프로젝트는 바퀴를 다시 만들거나 최신 및 고급 개발자가 개선한 오래된 접근 방식을 취할 수 있습니다. 나는 거기에 직접 가고 싶어 빨리빨리 들어가 보자!

먼저 중동 지도를 표시하는 간단한 웹페이지가 있습니다.

나는 이것을 어떻게 유용하게 만들 수 있을까?라고 생각했습니다. 어쩌면 간단한 상호 작용이 있을 수도 있습니다. 하지만 어떻게? 몇 시간 동안 Google, 코드 펜 및 기타 사이트를 검색한 후 이미지의 좌표를 사용하는 것이 낮은 수준의 방법이라는 것을 깨달았습니다. 어떻게 찾을 수 있나요? Google은 저를 조용한 사무실 한가운데서 손바닥을 마주하게 만드는 그림을 그리도록 보냈습니다. 그래서 나는 그것들을 잡는 데 도움이 되는 도구를 만들기로 결정했습니다.

유용성에 초점을 맞춘 아주 간단한 UI를 만들고 싶었습니다. 이 앱을 사용하면 사용자가 이미지를 찾아 화면에 표시할 수 있습니다. 사용자에게 레이어 이름과 선택적 링크를 묻는 메시지가 표시됩니다. 그런 다음 대상으로 삼으려는 이미지 영역 주위의 경계 상자를 클릭합니다. 예시에서는 이집트를 선택했습니다.

사용자가 저장을 클릭하면 사용자가 좌표만 복사할 수 있는 레이어 로그 아래 결과가 표시되고, GitHub 저장소에 연결된 테스트 페이지와 작동하는 코드 줄을 복사하고, 레이어를 편집하고, 또는 레이어를 모두 삭제하세요.

데모의 최종 결과는 사용자가 국가를 클릭하고 Wikipedia 페이지를 방문할 수 있는 중동 지도입니다! 이 도구를 사용하여 시험해보고 싶은 다른 사용 사례가 많이 있습니다.

읽어주셔서 감사합니다!

위 내용은 나의 첫 JavaScript 웹 앱: 대화형 이미지 좌표 찾기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!