ngx-image-compress@18.x使用

1. 安装 ngx-image-compress（如果尚未安装）

首先，确保你已经安装了 ngx-image-compress：

bash

npm install ngx-image-compress --save

2. 导入 NgxImageCompressService

在你的组件中，导入 NgxImageCompressService：

typescript

import { Component } from '@angular/core';
import { NgxImageCompressService } from 'ngx-image-compress';

3. 在组件中使用 NgxImageCompressService

你可以在组件的构造函数中注入 NgxImageCompressService，并通过它的 compressFile 方法来进行图片压缩。

下面是一个完整的示例：

typescript

import { Component } from '@angular/core';
import { NgxImageCompressService } from 'ngx-image-compress';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
compressedImage: string = ''; // 用于显示压缩后的图片

constructor(private imageCompress: NgxImageCompressService) {}

// 选择图片并压缩
async compressImage(event: any) {
const file = event.target.files[0]; // 获取用户选择的图片文件

if (file && file.type.startsWith('image/')) {
  try {
    // 使用 compressFile 方法进行压缩
    const result = await this.imageCompress.compressFile(file, 1, 50, 50);

    this.compressedImage = result;  // 获取压缩后的图片结果

    console.log('Compressed image size:', result.size / 1024, 'KB');
  } catch (error) {
    console.error('Compression error:', error);  // 错误处理
  }
}

}
}

4. 在模板中显示压缩后的图片

你可以在 HTML 模板中显示压缩后的图片：

html

Image Compress Example

5. compressFile 方法说明

compressFile 方法有以下参数：

typescript

compressFile(
image: File, // 图片文件
orientation: number, // 图片的方向旋转
quality: number, // 图片压缩质量，范围是 0-100，越小压缩比越高
maxWidth: number, // 压缩后图片的最大宽度
maxHeight: number // 压缩后图片的最大高度
): Promise // 返回压缩后的图片 URL (base64 格式)

6. 其它设置

   旋转方向：orientation 参数控制图片的旋转方向，通常可以保持为 1。
   质量设置：quality 控制压缩的质量，范围从 0 到 100，0 是最低质量，文件最小，100 是最高质量，文件最大。
   宽度和高度设置：maxWidth 和 maxHeight 控制图片的最大尺寸。如果你希望压缩后的图片不超过某个尺寸，可以设置这些参数。

7. 调试和优化

你可以根据需要调整参数以获得最适合你的图片压缩效果。
总结

步骤 1：安装 ngx-image-compress。
步骤 2：在组件中导入 NgxImageCompressService。
步骤 3：使用 compressFile 方法压缩图片，并处理返回的结果。
步骤 4：在模板中显示压缩后的图片。

通过这些步骤，你应该能够在 Angular 项目中使用 ngx-image-compress 来处理图片压缩了。如果有任何问题，可以继续提问！