[javascript] Cropper.js를 사용하여 이미지에 필터 적용하기
이번 포스트에서는 Cropper.js를 사용하여 이미지에 필터를 적용하는 방법을 알아보겠습니다. Cropper.js는 JavaScript로 작성된 이미지 자르기 및 편집 라이브러리로, 사용자가 원하는 형식과 크기로 이미지를 자를 수 있습니다.
Cropper.js 설치하기
Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm 패키지로 설치할 수 있습니다.
npm install cropperjs
필터 적용하기
이제 Cropper.js를 사용하여 이미지에 필터를 적용해보겠습니다.
// HTML에서 이미지 엘리먼트와 캔버스 엘리먼트를 가져옵니다.
const image = document.getElementById('image');
const canvas = document.getElementById('canvas');
// Cropper.js 인스턴스를 생성합니다.
const cropper = new Cropper(image, {
viewMode: 2, // 이미지를 크롭하지 않고 확대/축소만 가능하도록 설정합니다.
aspectRatio: NaN, // 이미지의 비율 무시
});
// 필터 적용 버튼 클릭 시 캔버스에 필터 적용
document.getElementById('applyFilterButton').addEventListener('click', () => {
// 캔버스 크기를 이미지 크기와 동일하게 설정합니다.
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
// 캔버스 2D 컨텍스트를 얻어옵니다.
const context = canvas.getContext('2d');
// 이미지를 캔버스에 그립니다.
context.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
// 필터를 적용합니다.
context.filter = 'blur(3px)';
// 캔버스에서 이미지를 다시 그립니다.
context.drawImage(canvas, 0, 0);
// 필터 적용 후의 이미지 URL을 얻어옵니다.
const filteredImageURL = canvas.toDataURL('image/png');
// 필터가 적용된 이미지로 Cropper.js 인스턴스를 업데이트합니다.
cropper.replace(filteredImageURL);
});
위의 코드에서는 HTML에서 이미지 엘리먼트와 캔버스 엘리먼트를 가져온 다음, Cropper.js 인스턴스를 생성합니다. 필터 적용 버튼을 클릭하면 캔버스에 필터가 적용된 이미지를 그린 후, 해당 이미지 URL을 얻어와 Cropper.js 인스턴스를 업데이트합니다.
이제 웹 페이지에서 Cropper.js를 사용하여 이미지에 필터를 적용할 수 있습니다.
결론
Cropper.js는 JavaScript를 사용하여 이미지 자르기 및 편집 기능을 제공하는 강력한 라이브러리입니다. 필터 적용 기능을 통해 사용자는 이미지에 다양한 효과를 적용할 수 있습니다. 이를 통해 웹 애플리케이션에서 보다 흥미로운 이미지 효과를 구현할 수 있습니다.