포시코딩

Cropper.js - 이미지 자르기 라이브러리 본문

JavaScript

Cropper.js - 이미지 자르기 라이브러리

포시 2023. 7. 9. 20:46
728x90

개요

canvas를 활용한 이미지 자르기 기능을 도와주는 라이브러리

저장된 이미지 또는 업로드한 이미지를 원하는 크기만큼 잘라 활용할 수 있다. 

 

https://fengyuanchen.github.io/cropperjs/

 

Cropper.js

 

fengyuanchen.github.io

https://github.com/fengyuanchen/cropperjs/tree/main

 

GitHub - fengyuanchen/cropperjs: JavaScript image cropper.

JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub.

github.com

 

세팅

Cropper.js의 Github readme에서 안내하는바대로 CDN을 통해 가져올거임

위 사진처럼 빨간 네모 안의 here을 누른 후

 

cropper.min.js, cropper.min.css 두 파일에 대한 코드를 복사해 다음과 같이 복붙한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

이렇게 사용 준비 완료

 

사용방법

사용방법은 예시 코드를 보며 그대로 따라하거나 활용하면 된다. 

사진상의 엠마 왓슨이 보이는 메인 페이지와 상단 Examples 버튼 아래의 여러 예시 기능들이 있는데

 

Github상에서 cropperjs/docs 안의 index.html이 메인 페이지, 

examples 폴더 내부의 파일들이 추가 기능들이다. 

 

내부 코드를 보면 js, css파일에 대해 

<link rel="stylesheet" href="../css/cropper.css">

이런식으로 되어있을텐데 이 코드 대신 위 세팅에서 CDN 가져온대로 하면 된다. 

 

예시

위 추가 기능중 Cropper with a range of aspect ratio를 구현한 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .container {
      margin: 20px auto;
      max-width: 640px;
    }

    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Cropper with a range of aspect ratio</h1>
    <div>
      <img id="image" src="img/picture.jpg" alt="Picture">
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      var image = document.querySelector('#image');
      var minAspectRatio = 0.5;
      var maxAspectRatio = 1.5;
      var cropper = new Cropper(image, {
        ready: function () {
          var cropper = this.cropper;
          var containerData = cropper.getContainerData();
          var cropBoxData = cropper.getCropBoxData();
          var aspectRatio = cropBoxData.width / cropBoxData.height;
          var newCropBoxWidth;

          if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
            newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);

            cropper.setCropBoxData({
              left: (containerData.width - newCropBoxWidth) / 2,
              width: newCropBoxWidth
            });
          }
        },

        cropmove: function () {
          var cropper = this.cropper;
          var cropBoxData = cropper.getCropBoxData();
          var aspectRatio = cropBoxData.width / cropBoxData.height;

          if (aspectRatio < minAspectRatio) {
            cropper.setCropBoxData({
              width: cropBoxData.height * minAspectRatio
            });
          } else if (aspectRatio > maxAspectRatio) {
            cropper.setCropBoxData({
              width: cropBoxData.height * maxAspectRatio
            });
          }
        },
      });
    });
  </script>
</body>
</html>

잘 작동하는 것을 볼 수 있다.

위 코드는 CDN 링크들로 작성했기 때문에 그대로 전체 복붙헤도 잘 작동할거임

 

커스터마이징

예시처럼 동그란 범위를 잘라낼 수도 있고 크기도 다르게 하는 등

세부 세팅을 입맛대로 바꿀 수 있다. 

const cropper = new Cropper('crop할 대상이 되는 이미지가 세팅된 요소', {
    // 옵션
    data: {
      width: 370,
      height: 370,
    },  // 잘라낼 범위의 기본 값을 가로, 세로 370으로 세팅한 모습
  });

다른 옵션들은 알아서 찾아보길

728x90
저작자표시

'JavaScript' 카테고리의 다른 글

OpenCV.js - CV(Computer Vision) 오픈 소스 라이브러리  (0) 2023.07.09
Tesseract.js - (OCR) 이미지 텍스트 인식 라이브러리  (0) 2023.07.09
[Vue 3.0] data()와 methods() 대신 setup() 사용하기  (0) 2023.06.21
[OCR] Tesseract.js  (0) 2023.06.15
location.href 안먹히는 현상  (0) 2023.02.05
'JavaScript' Related Articles more