@ digitalase/ngx-pica (中文(简体) )
@ digitalasetha/ngx-pica是一个Angular (LTS) 模块,用于在浏览器中调整图像文件大小 pica - 浏览器中的高品质图像大小调整。 。 。 .
重要
@ digitalase/ngx-pica (中文(简体) ). 角 5 兼容性在版本中 1.1.8 国家
$ npm install @digitalascetic/[email protected] --save
安装
- 添加
ngx-pica模块作为您项目的依赖性.
$ npm install pica exifr @digitalascetic/ngx-pica --save
- 包含
NgxPicaModule输入您的主应用程序或模块,您将使用该模块.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxPicaModule } from '@digitalascetic/ngx-pica';
@NgModule({
imports: [
BrowserModule,
NgxPicaModule
],
declarations: [ AppComponent ],
exports: [ AppComponent ]
})
export class AppModule {}
服务
- NgxPica 服务 - 使用 pica - 浏览器中的高品质图像大小调整
- NgxPicaimage 服务 - 辅助服务,帮助您处理图像
NgxPica 服务方法
.resizeImages(files: File[], width: number, height: number, options?: NgxPicaResizeOptionsInterface): Observable<File>
这种方法将一系列图像的大小依次调整,以优化CPU和内存的使用.
- 文件 : [] - 要调整大小的图像阵列
- 宽度 - 调整宽度(px)
- 高度 - 调整高度(px)
- 选项 - 基于 pica - 调整选项大小,我们也添加了宽比选项:
- 保持视线Ratio - 设定真实性,以确保图像的外观比在调整大小时得到维持
- 强制 - 设定真实性,以确保图像调整的尺寸大于宽度和定义的高度值
观察器在每一个已调整大小的文件上收到下一个文件 . 如果出事了 观察者会收到错误.
所有出错均被NgxPicaErrorInterface所包裹.
.resizeImage(file: File, width: number, height: number, options?: NgxPicaResizeOptionsInterface): Observable<File>
与以上相同,但只取一个文件,而不取一个文件数组.
.compressImages(files: File[], sizeInMB: number): Observable<File>
这种方法压缩出一系列相继完成的图像,以优化CPU和内存使用.
- 文件 : [] - 要调整大小的图像阵列
- 大小 IMB - 在MegaBytes中的文件大小
观察器在每一个已调整大小的文件上收到下一个文件 . 如果出事了 观察者会收到错误.
所有出错均被NgxPicaErrorInterface所包裹.
.compressImage(file: File, sizeInMB: number): Observable<File>
与以上相同,但只取一个文件,而不取一个文件数组.
NgxPicaimage 服务方法
.isImage(file: File): boolean
这种方法检查文件是否为图像
数据结构
export interface AspectRatioOptions {
keepAspectRatio: boolean;
forceDimensions?: boolean;
}
export interface NgxPicaResizeOptionsInterface {
aspectRatio?: AspectRatioOptions;
quality?: number;
alpha?: boolean;
unsharpAmount?: number;
unsharpRadius?: number;
unsharpThreshold?: number;
}
export enum NgxPicaErrorType {
NO_FILES_RECEIVED = 'NO_FILES_RECEIVED',
CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED = 'CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED',
NOT_BE_ABLE_TO_COMPRESS_ENOUGH = 'NOT_BE_ABLE_TO_COMPRESS_ENOUGH'
}
export interface NgxPicaErrorInterface {
err: NgxPicaErrorType;
file?: File;
}
示例
import { Component, EventEmitter } from '@angular/core';
import { NgxPicaService } from '@digitalascetic/ngx-pica';
@Component({
selector: 'app-home',
template: `
<img *ngFor="let image of images" [src]="image" />
<input type="file" [attr.accept]="image/*" multiple
(change)="handleFiles($event)">
`
})
export class AppHomeComponent {
images: File[] = [];
constructor(private _ngxPicaService: NgxPicaService) {
}
public handleFiles(event: any) {
const files: File[] = event.target.files;
this._ngxPicaService.resizeImages(files, 1200, 880)
.subscribe((imageResized: File) => {
let reader: FileReader = new FileReader();
reader.addEventListener('load', (event: any) => {
this.images.push(event.target.result);
}, false);
reader.readAsDataURL(imageResized);
}, (err: NgxPicaErrorInterface) => {
throw err.err;
});
}