[javascript] 콘텍스트 메뉴를 사용한 이미지 편집기 구현하기

11 Dec 2023

javascript

이미지 편집기에 콘텍스트 메뉴를 추가하여 사용자가 이미지를 편집할 때 편리하게 기능을 실행할 수 있도록 구현할 수 있다. 이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 콘텍스트(마우스 오른쪽 버튼) 클릭에 반응하여 이미지를 회전시키는 기능을 가진 간단한 이미지 편집기를 만드는 방법에 대해 알아보겠다.

1. HTML 구조 만들기

먼저, HTML을 사용하여 이미지와 콘텍스트 메뉴를 포함하는 구조를 만들어 보자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지 편집기</title>
  <style>
    #image-container {
      position: relative;
    }

    .context-menu {
      display: none;
      position: absolute;
      background: #f1f1f1;
      min-width: 120px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="image-container">
    <img id="image" src="image.jpg" alt="이미지">
    <div class="context-menu" id="context-menu">
      <a href="#" id="rotate-clockwise">시계방향으로 회전</a>
      <a href="#" id="rotate-counter-clockwise">시계 반대 방향으로 회전</a>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

2. JavaScript로 콘텍스트 메뉴 기능 추가하기

이제 JavaScript를 사용하여 콘텍스트 메뉴를 활성화시키고, 이미지를 회전시키는 기능을 구현해보자.

document.addEventListener("DOMContentLoaded", function() {
  const contextMenu = document.getElementById('context-menu');
  const imageContainer = document.getElementById('image-container');

  imageContainer.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    contextMenu.style.display = 'block';
    contextMenu.style.left = e.pageX + 'px';
    contextMenu.style.top = e.pageY + 'px';
  });

  document.addEventListener('click', function() {
    contextMenu.style.display = 'none';
  });

  const image = document.getElementById('image');
  document.getElementById('rotate-clockwise').addEventListener('click', function() {
    // 시계방향으로 회전하는 로직 작성
    // 예: image.style.transform = 'rotate(90deg)';
  });

  document.getElementById('rotate-counter-clockwise').addEventListener('click', function() {
    // 시계 반대 방향으로 회전하는 로직 작성
    // 예: image.style.transform = 'rotate(-90deg)';
  });
});

이제 콘텍스트 메뉴가 우클릭 이벤트에 반응하여 나타나고, 이미지를 회전시키는 간단한 이미지 편집기를 만들었다.

이제 이 튜토리얼을 통해 콘텍스트 메뉴를 추가하여 이미지 편집기를 만드는 방법에 대해 알게 되었다. 사용자가 콘텍스트 메뉴를 통해 이미지를 편리하게 편집할 수 있는 웹 어플리케이션을 개발하고 싶다면, 이 예제를 기반으로 확장시켜 보는 것을 권장한다.

참고문헌: MDN Web Docs