Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트

웹 앱을 만들 때 이미지를 자르고 서버로 보내고 싶을 때가 있습니다. 이런 경우에 트리밍을 하는 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 에서는, 프로필 화상을 등록할 때에 아래와 같이 사용하고 있습니다.


    끝에



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

    좋은 웹페이지 즐겨찾기