FRONT/JavaScript

[JS] Cropper.js 사용기

2022. 2. 5. 00:15
목차
  1. 1. 오픈소스 소프트웨어(Open Source Software, OSS)
  2. 2. Cropper.js 오픈소스 소개
  3. 3. 사용 방법
  4. 4. 최종 코드
  5. 5. 적용방법

1. 오픈소스 소프트웨어(Open Source Software, OSS)


공개적으로 액세스할 수 있게 설계되어 누구나 자유롭게 확인, 수정, 배포할 수 있는 코드입니다.

[오픈소스 장점]

1. 비용 절감

2. 빠르고 유연한 개발

3. 신뢰성(검증된 기관에서 발행 시 !!)

4. 변경의 자유로움
   (오픈소스가 유료화 되어도 자체적으로 변경하여 자산화 시 오픈소스 계속 이용 가능)

2. Cropper.js 오픈소스 소개


  - 공식 홈페이지 - Cropper.js

  - GitHub 주소 - GitHub - fengyuanchen/cropperjs: JavaScript image cropper.

  - JavaScript의 Container와 Canvas 기능을 활용한 오픈소스로 Canvas 안 이미지를 자유롭게 편집하고 Canvas를 이미      지 파일로 쉽게 저장할 수 있도록 도와준다.

  - 라이선스 : MIT

3. 사용 방법


<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>
/* Ensure the size of the image fit the container perfectly */
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}
// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

[Options(Object)]

new Cropper(image, options)
Cropper.setDefualts(options)

  • viewMode
    • 이미지의 크기를 벗어날것인가 이미지 크기 안에서 crop을 지정할 것인가를 정한다.
  • dragMode
    • 마우스 포인터의 역할(move, crop, none)
  • preview
    • Crop 되는 이미지를 실시간으로 보여주는 div를 설정
  • restore
    • cropper의 영역을 재 시작한다.
  • checkCrossOrigin
  • autoCropArea
    • cropper 시작시 CopperBox의 크기 지정(0.1~1.0)
  • zoomOnWheel
    • 마우스 휠을 이용한 zoom 여부
  • cropBoxResizeable
    • CropperBox의 사이즈 고정
  • toggleDragModeOnDbclick
    • Container안에서 마우스 더블 클릭 시 dragMode 변환Methods
  • getData()
    • 최종적으로 잘라낸 Cropper 위치와 크기데이터를 원본 이미지에 기반해 출력
  • getContainerData()
    • Container의 크기를 반환한다.
  • getImageData()
    • Image의 크기를 반환한다.
  • getCanvasData()
    • Canvas의 크기를 반환한다.
  • getCropBoxData()
    • CropBox의 크기를 가져온다
  • getCroppedCanvas([options])
    • Cropper된 이미지를 가져온다.
    • 최종적으로 많은 옵션을 지정해서 Image를 얻을 수 있는 메소드
    • options
    • fillColor
    • 투명도 사용시 무조건 이미지 png로 저장
      (jpeg, jpg는 투명도를 검정색으로 나타낸다. )
    • imageSmoothingEnalbed
        - 이미지 매끄럽게 처리되는 지 여부
    • imageSmoothingQulity
        - 이미지 품질 낮음, 중간, 높음 설정
    • return type : HTMLCanvasElement

[Event]

  • ready
  • cropstart
  • cropmove
  • cropend

[Container에서 이미지파일로 저장 방법]

  1. Canvas -> blob
  2. Blob -> FormData로 넘기기
  3. FormData에서 서버로 넘기기

더 나은 이미지 품질을 위 원본, 잘린 이미지 서버에 업로드 후 서버에서 자르기 실행(손실압축)

4. 최종 코드


//1. 기본 형식
cropper.getCroppedCanvas();

//2. Options사용 방식
cropper.getCroppedCanvas({
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',//투명도 설정 가능
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

//3. 서버에 올릴 수 있도록 파일로 변환하는 방법
cropper.getCroppedCanvas().toBlob((blob) => {
//HTMLCanvasElement를 return 받아서 blob파일로 변환해준다
  const formData = new FormData();

    formData.append('croppedImage', blob/*, 'example.png' , 0.7*/);
    //새로운 formData를 생성해서 앞에서 변경해준 blob파일을 삽입한다.(이름 지정 가능, 맨뒤 매개변수는 화질 설정)
  // jQuery.ajax이용해서 서버에 업로드
  $.ajax('/path/to/upload', {
    method: 'POST',
    data: formData,//앞에서 생성한 formData
        processData : false,    // data 파라미터 강제 string 변환 방지
    contentType : false,    // application/x-www-form-urlencoded; 방지
    success() {
      console.log('Upload success');
    },
    error() {
      console.log('Upload error');
    },
  });
}/*, 'image/png' */);//서버에 저장 형식 사용 가능

 


이때, PNG로 저장을 해야 원형으로 CROP 했을 시 정사각형으로 저장되지 않습니다.

5. 적용방법


[사용자 요구에 맞게 오픈소스 변경]

처음 Cropper시 이미지 안에서만 생성 될 수 있도록 되어있던 코드 변경하여 원하는 CropBox를 생성하고 그 크기에 이미지를 맞추는 방법으로 변경

 

[CropBox 사용자 크기 지정 가능케 변경]

 

'FRONT > JavaScript' 카테고리의 다른 글

[KENDO JS] DataSource를 gird, listview에 재사용하기  (0) 2021.10.08
[JS] JavaScript 스코프  (0) 2021.07.01
[JS] vanilla js로 무한 스크롤(Infinite scroll) 구현하기  (0) 2021.07.01
[JS] vanilla js로 Pagination 구현하기  (0) 2021.07.01
  1. 1. 오픈소스 소프트웨어(Open Source Software, OSS)
  2. 2. Cropper.js 오픈소스 소개
  3. 3. 사용 방법
  4. 4. 최종 코드
  5. 5. 적용방법
'FRONT/JavaScript' 카테고리의 다른 글
  • [KENDO JS] DataSource를 gird, listview에 재사용하기
  • [JS] JavaScript 스코프
  • [JS] vanilla js로 무한 스크롤(Infinite scroll) 구현하기
  • [JS] vanilla js로 Pagination 구현하기
eunoia07
eunoia07
output of develop
eunoiaoutput of develop
eunoia07
eunoia
eunoia07
전체
오늘
어제
  • 분류 전체보기 (25)
    • FRONT (9)
      • CSS (1)
      • JavaScript (5)
      • React (2)
    • SERVER (6)
      • SpringBoot (2)
      • .NET (1)
      • DB (3)
    • DevOps (5)
      • AWS (1)
      • IIS (2)
    • Algrithm (3)
    • Interview (1)
    • IT Book Review (0)
    • Trouble shooting (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 가상디렉터리
  • algrithm
  • java이진탐색
  • .NET MVC
  • HTML 구축
  • kendo js
  • kendo dataSource
  • 자바스크립트 무한스크롤
  • kendoListview
  • ASP
  • kendorefresh
  • infinite scroll
  • 클라이언트 오류
  • CSS
  • C#
  • javascript pagination
  • .NET 오류
  • kendoGrid
  • autoBind
  • JQuery
  • js page
  • 무한스크롤
  • javascript
  • 페이지네이션
  • ValidateInput
  • 브라우저동작
  • IntersectionObserver
  • .NET 오류 해결 방법
  • setDataSource
  • kendo ui

최근 댓글

최근 글

hELLO · Designed By 정상우.
eunoia07
[JS] Cropper.js 사용기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.