# @digitalascetic/ngx-pica 中文文档

规范地址：https://npmcn.com/package/%40digitalascetic/ngx-pica/

版本：20\.1\.3
npm 元数据更新时间：2024-12-16T11:14:40.008Z
中文译文更新时间：2026-11-12T08:41:54.125Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40digitalascetic/ngx-pica
原文对照：https://npmcn.com/package/%40digitalascetic/ngx-pica/?lang=original
项目主页：https://github.com/digitalascetic/ngx-pica#readme
源码仓库：https://github.com/digitalascetic/ngx-pica

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：69.6 kB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>=18\.2\.0，@angular/core \>=18\.2\.0，browser-image-compression ^2\.0\.2
- 首次发布：2018-03-12T08:26:22.154Z
- 最新版本发布：2024-12-16T11:14:39.759Z
- 近 30 天下载量：11918（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 0 个）

## 中文简介

在浏览器中调整图像文件大小的角( LTS) 模块

## 安装

```sh
npm install @digitalascetic/ngx-pica
```

也可以使用：`pnpm add @digitalascetic/ngx-pica`、`yarn add @digitalascetic/ngx-pica`、`bun add @digitalascetic/ngx-pica`

## README

# @ digitalase/ngx-pica (中文(简体) )

> @ digitalasetha/ngx-pica是一个Angular (LTS) 模块,用于在浏览器中调整图像文件大小 [pica - 浏览器中的高品质图像大小调整](https://github.com/nodeca/pica)。 。 。 .

[![latest](https://img.shields.io/npm/v/%40digitalascetic/ngx-pica/latest.svg)](https://www.npmjs.com/package/@digitalascetic/ngx-pica)

## 重要

@ digitalase/ngx-pica (中文(简体) ). 角 5 兼容性在版本中 **1.1.8 国家**

```bash
$ npm install @digitalascetic/ngx-pica@1.1.8 --save
```

## 安装

1.  添加 `ngx-pica` 模块作为您项目的依赖性.

```bash
$ npm install pica exifr @digitalascetic/ngx-pica --save
```

2.  包含 `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 - 浏览器中的高品质图像大小调整](https://github.com/nodeca/pica)
-   **NgxPicaimage 服务** - 辅助服务,帮助您处理图像

## NgxPica 服务方法

#### `.resizeImages(files: File[], width: number, height: number, options?: NgxPicaResizeOptionsInterface): Observable<File>`

这种方法将一系列图像的大小依次调整,以优化CPU和内存的使用.

-   **文件 : \[\]** - 要调整大小的图像阵列
-   **宽度** - 调整宽度(px)
-   **高度** - 调整高度(px)
-   **选项** - 基于 [pica - 调整选项大小](https://github.com/nodeca/pica#resizefrom-to-options---promise),我们也添加了宽比选项:
    -   **保持视线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;
}
```

## 示例

```ts
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;
            });
    }
```

## 常见问题

### @digitalascetic/ngx-pica 是什么？

在浏览器中调整图像文件大小的角\( LTS\) 模块

### 如何安装 @digitalascetic/ngx-pica？

在项目目录运行 npm install @digitalascetic/ngx-pica，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=18\.2\.0）、@angular/core（\>=18\.2\.0）、browser-image-compression（^2\.0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @digitalascetic/ngx-pica 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @digitalascetic/ngx-pica 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @digitalascetic/ngx-pica 可以商用吗？

@digitalascetic/ngx-pica 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @digitalascetic/ngx-pica 的下载量有多少？

根据 npm 官方下载统计，@digitalascetic/ngx-pica 在 2026/10/12 – 2026/11/10 这 30 天内被下载 11,918 次，日均约 397 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @digitalascetic/ngx-pica 还在维护吗？

最新版本 20\.1\.3 发布于 2024/12/16（1\.9 年前）；至今共发布 35 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。