[javascript] Cropper.js를 사용하여 이미지에 화이트 인크 효과 추가하기

29 Nov 2023

javascript

이미지 편집 기능을 웹 애플리케이션에 추가하려면 일반적으로 고급 이미지 편집 도구를 사용합니다. 하지만 간단한 효과를 적용하기 위해서는 보다 간편한 솔루션이 필요할 수 있습니다. Cropper.js는 이미지 자르기, 회전, 크기 조정 등의 기능을 제공하는 경량화된 JavaScript 라이브러리입니다.

이번 예제에서는 Cropper.js를 사용하여 이미지에 화이트 인크 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 Cropper.js를 설치합니다.

npm install cropperjs

Cropper.js를 사용하여 이미지 자르기

HTML 파일에서 Cropper.js와 관련 CSS 파일을 import합니다.

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/cropper.css">
  <script src="path/to/cropper.js"></script>
  ...
</head>
<body>
  ...
</body>
</html>

JavaScript 파일에서 이미지를 선택하고 Cropper 객체를 생성합니다.

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  viewMode: 1,
});

이미지를 자르고 효과를 추가합니다.

const canvas = cropper.getCroppedCanvas({
  width: 300,
  height: 300,
});
const context = canvas.getContext('2d');
context.globalCompositeOperation = 'lighter';
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

위 코드는 Cropper 객체의 getCroppedCanvas 메서드를 사용하여 이미지를 자르고, 자른 이미지에 효과를 추가하는 과정입니다. 먼저 자른 이미지를 Canvas로 변환한 다음, globalCompositeOperation 속성을 ‘lighter’로 설정하여 이미지에 화이트 인크 효과를 추가합니다.

자른 이미지를 표시합니다.

document.getElementById('result').appendChild(canvas); // 이미지를 표시할 HTML 요소에 canvas를 추가합니다.

참고 자료

Cropper.js 공식 문서: https://github.com/fengyuanchen/cropperjs

위 예제는 Cropper.js를 사용하여 이미지에 화이트 인크 효과를 추가하는 방법을 간단히 소개한 것입니다. Cropper.js에는 다양한 편집 기능이 제공되므로 상세한 사용법은 공식 문서를 참고하시기 바랍니다.