angular处理图像拖放组件

angular处理图像拖放组件
插件名称 ng-drop-image
发布时间 2020年8月8日
插件作者 Pluritech

一个angular组件,可帮助您处理单个或多个图像。用户可以使用传统的选择或放置功能来输入图像。

安装:

$ npm install @pluritech/ng-drop-image –save

使用ng-drop-image

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// 导入库
import { DropImageModule } from '@pluritech/ng-drop-image';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // 将库指定为导入
    DropImageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

导入库后,您可以在Angular应用程序中使用drop-image组件:

<div class="container">
  <div class="row">
    <pluri-drop-image btnSelect="Select"
      [localList]="myUpdatedImageList"
      [serverList]="myServerImageList"
      [singleImage]="false"
      [hasError]="true"
      errorText="The image is too small"
      defaultText="Please, select or drop an image"
      inputPlaceholder="Select an image"
      (onImageChange)="whenChange($event)"
      minHeigth=1000
      minHeigth=1000
      (onError)="whenError($event)"
      (onUpdateList)="whenUpdateLocalList($event)"
      (onLocalImageSetAsMain)="whenLocalImageSetAsMain($event)"
      (onLocalImageDelete)="whenLocalImageDelete($event)"
      (onServerImageSetAsMain)="whenServerImageSetAsMain($event)"
      (onServerImageDelete)="whenServerImageDelete($event)">
    </pluri-drop-image>
  </div>
</div>

而且,在打字稿方面,我们有以下内容

export class AppComponent implements OnInit {
  title = 'ng-drop-image';

  public myUpdatedImageList: Base64Image[] = [];
  public myServerImageList: any[] = [];
  ngOnInit() {
    fetch('https://randomuser.me/api/?results=4')
    .then(data => data.json())
    .then(data => data.results)
    .then(data => this.myServerImageList = data.map(person => {
      return {main: false, path: person.picture.large}
    }));
  }

  whenChange(image: Base64Image): void {
    console.log('image changed', image);
  }

  whenError(error: ErrorPicture): void {
    console.log('error picture', error);
  }

  whenUpdateLocalList(list: Base64Image[]): void {
    console.log('list updated', list);
  }

  whenLocalImageSetAsMain(image: Base64Image): void {
    console.log('image to set as main', image);
    image.main = true;
  }

  whenLocalImageDelete(image: Base64Image): void {
    console.log('image to delete', image);
    const index = this.myUpdatedImageList.indexOf(image);
    this.myUpdatedImageList.splice(index, 1);
  }

  whenServerImageSetAsMain(image: any): void {
    console.log('image to set as main in server', image);
    image.main = true;
  }

  whenServerImageDelete(image: any): void {
    console.log('image to delete in server', image);
    const index = this.myServerImageList.indexOf(image);
    this.myServerImageList.splice(index, 1);
  }

变量

参数描述
btnSelect“选择图片”按钮的文字
hasError用于显示错误文本的布尔表达式
errorText错误文字
defaultText默认文字,例如…’请放下图片
inputPlaceholder要在阻止的输入中显示的文本
singleImage一个布尔值,指示您是要处理单个图像还是多个图像。默认为true
imagePath要在模板中显示的图像的路径,它可以是base64或图像url,仅当您使用单个图像时
minWidth插入的任何图像的最小宽度(以像素为单位),默认为null,因此,将接受每个图像。
minHeigth插入的任何图像的最小高度,默认为null,因此,将接受每个图像
onError图片出现错误时要调用的函数
onImageChange仅在使用单个图像时才更改图像时调用的函数
localList图像的本地列表必须为Base64Image类型
onLocalImageSetAsMain将本地图像设置为主图像时要调用的函数
onLocalImageDelete删除本地图像时调用的函数
onUpdateList每次更新列表时调用的函数,它将发出整个列表
serverList 图像的服务器列表,键入任意,但是,它需要具有属性路径和属性main
onServerImageSetAsMain将服务器映像设置为主服务器时调用的函数
onServerImageDelete删除服务器映像时调用的函数