Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트
매우 간단한 라이브러리이지만 Angular에서 사용할 때 조금 빠졌기 때문에 기록을 남겨 둡니다.
Cropper란?
Cropper는 트리밍 라이브러리이며 jQuery 용과 기본 JavaScript 용입니다.
jquery-cropper
Cropper.js
이번에는 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.tsimport Cropper from 'cropperjs';
HTML 및 Component
test-cropper.html <p><img #img alt="トリミング画像" id="trimed_image" [src]="preview" (load)="imageLoaded($event)"/></p>
test-cropper.component.tsimport 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 에서는, 프로필 화상을 등록할 때에 아래와 같이 사용하고 있습니다.
끝에
트리밍 윈도우의 가로 세로 비율을 변경하거나 이미지를 회전 시키거나 다른 많은 기능이있는 것 같아서 사용해보십시오.
Reference
이 문제에 관하여(Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/otoan/items/c542092a1b283bfaadaf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
@import "~cropperjs/dist/cropper.css";
import Cropper from 'cropperjs';
<p><img #img alt="トリミング画像" id="trimed_image" [src]="preview" (load)="imageLoaded($event)"/></p>
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;
},
});
}
}
Reference
이 문제에 관하여(Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/otoan/items/c542092a1b283bfaadaf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)