[javascript] PhotoSwipe와 연동하여 이미지 워터마크 삽입하기

22 Nov 2023

javascript

이미지 워터마크는 이미지에 소유권 정보나 저작권 정보를 표시하는 데 사용되는 기법입니다. 이 글에서는 PhotoSwipe 라이브러리와 연동하여 이미지 워터마크를 삽입하는 방법에 대해 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 사용자가 모바일 디바이스나 데스크톱에서 다양한 이미지를 터치 또는 스와이프로 관람할 수 있는 JavaScript 라이브러리입니다. 사용하기 쉽고 다양한 플랫폼에서 호환되는 PhotoSwipe를 활용하여 이미지 워터마크를 삽입할 수 있습니다.

이미지 워터마크 삽입하기

PhotoSwipe에서 이미지 워터마크를 삽입하기 위해서는 다음과 같은 절차가 필요합니다.

PhotoSwipe 라이브러리를 다운로드하고 웹 페이지에 삽입합니다.
이미지 보기에 필요한 HTML 구조를 생성합니다.
이미지 워터마크를 적용할 이미지 태그에 data-pswp-uid 속성을 추가합니다.
이미지 워터마크를 표시하는 CSS 스타일을 추가합니다.
JavaScript 코드를 작성하여 이미지를 로드할 때 워터마크를 적용합니다.

아래 예제는 PhotoSwipe와 연동하여 이미지 워터마크를 삽입하는 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <!-- PhotoSwipe CSS 파일 -->
    <link rel="stylesheet" href="photoswipe.css">
    <link rel="stylesheet" href="default-skin.css">
  </head>
  <body>
    <img src="image.jpg" alt="Image" data-pswp-uid="1">
    
    <!-- PhotoSwipe HTML 구조 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
      </div>
    </div>
    
    <!-- PhotoSwipe JavaScript 파일 -->
    <script src="photoswipe.min.js"></script>
    <script src="photoswipe-ui-default.min.js"></script>
    
    <script>
      var pswpElement = document.querySelectorAll('.pswp')[0];

      var items = [
        {
          src: 'image.jpg',
          w: 1200,
          h: 800,
          title: 'Image',
          msrc: 'image-thumb.jpg' // 썸네일 이미지
        }
      ];

      var options = {
        index: 0,
        showHideOpacity: true,
        getThumbBoundsFn: function(index) {
          // 썸네일 이미지의 위치를 가져오는 함수
          var thumbnail = document.querySelector('[data-pswp-uid="' + index + '"]');
          var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
          var rect = thumbnail.getBoundingClientRect();

          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
        }
      };

      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
      gallery.init();
    </script>
  </body>
</html>

위 코드는 PhotoSwipe를 로드하고 이미지를 보기 위한 HTML 구조를 생성한 뒤, data-pswp-uid 속성을 이용하여 워터마크 적용 대상 이미지를 지정한 것입니다. 이후 JavaScript 코드를 추가하여 PhotoSwipe를 초기화하고 워터마크를 적용합니다.

참고자료

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/getting-started.html