Gentics UI Angular图像编辑器

Gentics UI Angular图像编辑器
插件名称 gentics-ui-image-editor
发布时间 2020年5月27日
插件作者 gentics

一个用于裁剪,调整大小和设置图像焦点的角度模块。

安装:

# NPM
$ npm install gentics-ui-image-editor --save

安装:

并将其导入GenticsUIImageEditorModule到您的Angular应用中。请注意,此模块取决于Gentics UI Core v6.1.0或更高版本。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GenticsUICoreModule } from 'gentics-ui-core';
import { GenticsUIImageEditorModule } from 'gentics-ui-image-editor';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GenticsUICoreModule.forRoot(),
    GenticsUIImageEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件:

gentics-ui-image-editor

<gentics-ui-image-editor [src]="sourceUrl"
                         [(transform)]="transformParams"
                         (editing)="isEditing"
                         [disableAspectRatios]="disableAspectRatios"
                         [customAspectRatios]="customAspectRatios"
                         [canCrop]="canCrop"
                         [canResize]="canResize"
                         [canSetFocalPoint]="canSetFocalPoint"
                         [language]="language"></gentics-ui-image-editor>

Inputs

  • srcstring所需的图像的URL将被编辑。
  • transformImageTransformParams]设置图像变换(参见下文)。
  • disableAspectRatiosAspectRatio[]]禁用作物纵横比。默认为[]
  • customAspectRatiosAspectRatio[]]提供自定义的宽高比。默认为[]
  • canCropboolean]启用裁剪功能。默认为true
  • canResizeboolean]启用调整大小功能。默认为true
  • canSetFocalPointboolean]启用焦点功能。默认为true
  • language'en' | 'de']指定编辑器中使用的标签的语言。默认为'en'

Outputs

  • transformChangeImageTransformParams]每当对图像应用变换时会发出。该ImageTransformParams类型在下面给出。
  • editingbooleantrue每当编辑器切换到裁剪/编辑/对焦点模式时,以及false在切换到预览模式时,都会发出[ ] 。
type ImageTransformParams = {
    width: number;
    height: number;
    scaleX: number;
    scaleY: number;
    cropRect: {
        startX: number;
        startY: number;
        width: number;
        height: number;
    };
    focalPointX: number;
    focalPointY: number;
};