[javascript] PhotoSwipe를 이용한 이미지 다운로드 기능 구현 방법

22 Nov 2023

javascript

PhotoSwipe는 자바스크립트를 이용하여 모바일 및 데스크탑에서 사용할 수 있는 이미지 갤러리 라이브러리입니다. PhotoSwipe는 이미지를 확대, 축소 및 스와이프하여 볼 수 있는 기능을 제공하는데, 이번에는 이 PhotoSwipe 라이브러리를 사용하여 이미지 다운로드 기능을 구현하는 방법에 대해 알아보겠습니다.

1. PhotoSwipe 설치

PhotoSwipe는 npm, yarn 또는 CDN을 통해 다운로드 할 수 있습니다. 이 예제에서는 CDN을 이용하여 설치해보겠습니다. HTML 파일에서 다음의 스크립트 태그를 추가하여 PhotoSwipe를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">

2. 이미지 다운로드 버튼 추가

이미지 다운로드 버튼을 추가하기 위해 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 class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--download" title="Download"></button> <!-- 다운로드 버튼 -->
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
        </div>
    </div>
</div>

위 코드에서 주석으로 표시된 부분이 바로 이미지 다운로드 버튼입니다.

3. 자바스크립트 코드 추가

이미지 다운로드 버튼의 동작을 추가하기 위해 자바스크립트 코드를 작성합니다.

var pswpElement = document.querySelectorAll('.pswp')[0];

// 이미지 다운로드 버튼 클릭 시 호출되는 함수
function downloadImage() {
    var pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {index: 0});
    pswp.init();
    pswp.listen('gettingData', function(index, item) {
        var downloadButton = pswp.ui.topBar.querySelector('.pswp__button--download');
        
        // 다운로드 버튼 클릭 시 해당 이미지를 다운로드
        downloadButton.addEventListener('click', function() {
            var link = document.createElement('a');
            link.href = item.src;
            link.download = 'image.jpg';
            link.click();
        });
    });
}

// 이미지 클릭 시 호출되는 함수
function openImage() {
    // 이미지를 클릭한 경우 열고자 하는 이미지의 정보를 세팅
    var items = [ 
        {
            src: 'path_to_your_image.jpg',
            w: 1200,
            h: 800
        },
        {
            src: 'path_to_your_image.jpg',
            w: 1200,
            h: 800
        },
        {
            src: 'path_to_your_image.jpg',
            w: 1200,
            h: 800
        }
    ];

    var pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {index: 0});
    pswp.listen('afterChange', function() {
        // 현재 이미지가 변경될 때마다 다운로드 버튼을 갱신
        var downloadButton = pswp.ui.topBar.querySelector('.pswp__button--download');
        if (pswp.currItem.hasOwnProperty('downloadUrl')) {
            downloadButton.style.display = 'block';
        } else {
            downloadButton.style.display = 'none';
        }
    });
    pswp.init();
}

// 이미지 클릭 시 팝업창 열기
document.querySelectorAll('.image-thumbnail').forEach(function(element) {
    element.addEventListener('click', openImage);
});

위 코드에서 path_to_your_image.jpg 부분에 실제 이미지의 경로를 입력해주어야 합니다.

이제 이미지 다운로드 기능이 포함된 PhotoSwipe 이미지 갤러리를 사용할 수 있습니다.

PhotoSwipe의 자세한 사용법과 옵션에 대해서는 공식 문서를 참고하세요.

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

이상으로 PhotoSwipe를 이용한 이미지 다운로드 기능 구현 방법에 대해 알아보았습니다.