웹 앱을 만들 때 이미지를 자르고 서버로 보내고 싶을 때가 있습니다. 이런 경우에 트리밍을 하는 UI와 트리밍 기능을 제공해 주는 것이 Cropper.js입니다.
매우 간단한 라이브러리이지만 Angular에서 사용할 때 조금 빠졌기 때문에 기록을 남겨 둡니다.

Cropper란?

Cropper는 트리밍 라이브러리이며 jQuery 용과 기본 JavaScript 용입니다.

jquery-cropper

jQuery 용

Cropper.js

기본 JavaScript 용

이번에는 Angular에서 사용하고 싶으므로 Cropper.js를 사용합니다.

사용법

설치

npm install --save cropperjs

js 및 css 로딩

공식 사이트에는

test.html

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

라고 써 있습니다만, Angular이므로 style 파일과 component 파일로 아래와 같이 import합니다.

style.scss

@import "~cropperjs/dist/cropper.css";

test-cropper.component.ts

import Cropper from 'cropperjs';

HTML 및 Component

test-cropper.html

  <p><img #img alt="トリミング画像" id="trimed_image" [src]="preview" (load)="imageLoaded($event)"/></p>

test-cropper.component.ts

import Cropper from 'cropperjs';

export class TestCropperComponent{

  const preview = 'https://....'

  imageLoaded(ev: Event) {
    logger().log('imageLoaded');

    let croppable = false;

    if (this.cropper) {
      this.cropper.destroy();
    }

    const image = ev.target as HTMLImageElement;

    this.cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode: 1,
      ready: function () {
        logger().log('ready');
        croppable = true;
      },
    });
  }
}

여기서의 포인트는 new Cropper() 를, 이미지의 로드 후에 실시하는 것입니다. ngOnInit이나 ngAfterViewInit 중에서 불러도 움직이지 않습니다 (여기서 많이 빠졌습니다)

표시

이런 식으로 표시됩니다. 파란색 프레임을 자유롭게 움직이거나 크기를 변경할 수 있습니다.

나의 개인 개발하고 있는 성격 진단 요약 SNS, Sotty 에서는, 프로필 화상을 등록할 때에 아래와 같이 사용하고 있습니다.

끝에

트리밍 윈도우의 가로 세로 비율을 변경하거나 이미지를 회전 시키거나 다른 많은 기능이있는 것 같아서 사용해보십시오.