Angular 5+图像编辑器 - ngx-image-editor

Angular 5+图像编辑器 - ngx-image-editor
插件名称 ngx-image-editor
发布时间 2020年5月20日
插件作者 hggeorgiev

基于Angular Material的 Angular 5+应用程序的出色图像编辑器。

安装

yarn add cropperjs

使用

步骤1:cropperjs.angular.json

}
       "styles": [
         "node_modules/cropperjs/dist/cropper.css"
       ],
       "scripts": [
         "node_modules/cropperjs/dist/cropper.js"
       ]
}

步骤2:安装ngx-image-editor

 yarn add ngx-image-editor

步骤3:NgxImageEditorModule在应用程序中导入:

      import {NgxImageEditorModule} from "ngx-image-editor";

      @NgModule({
        imports: [
          NgxImageEditorModule
        ]
      })

步骤4:在您的应用程序中使用:

<ngx-image-editor [config]="yourConfig"></ngx-image-editor>

API

属性 描述
[config] 包含编辑器配置的对象(请参见Configuration
(file) 编辑后发出的文件。

配置

属性 描述
ImageName 图片名称。
ImageUrl 图片的网址(如果它来自CDN)。
File 图像的文件对象(如果正在通过浏览器上传图像)。
ImageType 图片类型(默认为 image/jpeg).
AspectRatios 宽高比数组。可用选项: 0:01:1 , 2:3 ,4:316:9. (默认为 0:0)