[javascript] PhotoSwipe를 이용한 이미지 편집 및 필터링 기능 설명

22 Nov 2023

javascript

이미지 편집 및 필터링은 웹 애플리케이션에서 매우 중요한 기능입니다. 사용자가 이미지를 편집하거나 필터를 적용할 수 있게 되면 더욱 흥미로운 경험을 제공할 수 있습니다. 이러한 기능을 구현하기 위해 PhotoSwipe라는 자바스크립트 라이브러리를 사용할 수 있습니다.

PhotoSwipe 소개

PhotoSwipe는 모바일과 데스크톱에서 사용하기 용이한 자바스크립트 이미지 갤러리 라이브러리입니다. 이 라이브러리를 이용하면 이미지를 확대 및 축소하고, 회전하며, 슬라이드쇼로 보여주는 등 다양한 기능을 갖춘 이미지 갤러리를 쉽게 만들 수 있습니다.

PhotoSwipe는 충분히 유연한 구조로 제작되었기 때문에 이미지 편집 및 필터링 기능을 추가할 수 있습니다. 이제부터 PhotoSwipe를 사용하여 이미지 편집 및 필터링을 구현하는 방법에 대해 알아보겠습니다.

이미지 편집 기능 추가하기

사용자가 이미지를 클릭하면 PhotoSwipe를 초기화하고 이미지를 편집 할 수 있는 기능을 추가할 수 있습니다. 예를 들어, 크롭, 회전 및 확대/축소 등과 같은 편집 도구를 제공할 수 있습니다.

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

var items = [
    {
        src: 'path/to/image.jpg',
        w: 1200,
        h: 900
    },
    // 다른 이미지 아이템들 추가
];

var options = {
    // PhotoSwipe 옵션 설정
};

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// 이미지 클릭 시 편집 기능 활성화
document.querySelectorAll('.image').forEach(function(element) {
    element.addEventListener('click', function() {
        gallery.init();
        // 이미지 편집 기능 추가 코드 작성
    });
});

위 코드에서 ‘image’ 클래스를 가진 요소를 클릭하면 PhotoSwipe 갤러리가 초기화되고, 편집 기능이 활성화됩니다. 이제 사용자는 이미지를 자르고 회전하며 확대/축소할 수 있게 됩니다.

이미지 필터링 기능 추가하기

PhotoSwipe에는 이미지 필터링 기능을 추가하기 위한 내장 필터들이 제공됩니다. 이러한 내장 필터를 사용하여 이미지에 다양한 효과를 적용할 수 있습니다.

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

var items = [
    {
        src: 'path/to/image.jpg',
        w: 1200,
        h: 900
    },
    // 다른 이미지 아이템들 추가
];

var options = {
    // PhotoSwipe 옵션 설정
};

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// 이미지 클릭 시 필터링 기능 활성화
document.querySelectorAll('.image').forEach(function(element) {
    element.addEventListener('click', function() {
        gallery.init();

        // 필터링 기능 추가 코드 작성
        var filterEl = document.createElement('div');
        filterEl.classList.add('pswp__filter');
        filterEl.style.filter = 'grayscale(100%)'; // 흑백 필터링

        gallery.container.appendChild(filterEl);
    });
});

위 코드에서 ‘image’ 클래스를 가진 요소를 클릭하면 PhotoSwipe 갤러리가 초기화되고, 필터링 기능이 활성화됩니다. 흑백 필터링을 예로 들면, 이미지에 ‘pswp__filter’ 클래스가 추가되고 ‘grayscale(100%)’ 속성을 이용하여 흑백으로 변환됩니다.

결론

PhotoSwipe를 사용하여 이미지 편집 및 필터링 기능을 추가할 수 있습니다. 사용자에게 매력적인 이미지 경험을 제공하기 위해 이러한 기능을 구현해보세요. PhotoSwipe에 대한 더 자세한 내용은 공식 문서를 참조해주세요.