Image-processing-suite NPM

Image Processing Suite

简介说明

一个用于各种图像处理任务的 Vue 3 插件套件，包括图像分辨率检查、图像切片和图像压缩。（A Vue 3 plugin suite for various image processing tasks, including image resolution checking, image slicing, and image compression.）

安装使用

你可以通过 npm 或者 yarn 来安装 image-processing-suite 包：

npm install image-processing-suite

或者使用 yarn：

yarn add image-processing-suite

使用方法

全局安装

首先，你需要在你的 Vue 3 应用中全局安装该插件。在你的主入口文件（通常是 main.ts 或者 main.js）中，导入并使用该插件：

import { createApp } from 'vue';
import App from './App.vue';
import ImageProcessingSuite from 'image-processing-suite';

const app = createApp(App);
app.use(ImageProcessingSuite);
app.mount('#app');

在组件中使用

基础示例（vue3）

以下是在 Vue 3 组件中使用该插件功能的简单示例：

<template>
    <input type="file" @change="handleFileUpload" />
    <div v-if="resolutionResult.length > 0">
        <p v-for="(result, index) in resolutionResult" :key="index">
            {{ result.file.name }}: {{ result.isValid ? '分辨率符合要求' : '分辨率不符合要求' }}
        </p>
    </div>
    <img v-for="(slice, index) in imageSlices" :key="index" :src="slice" alt="图片切片" />
    <p v-if="compressedFile">压缩后的文件名: {{ compressedFile.name }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { checkImageResolutions, sliceImage, compressImage } from 'image-processing-suite';

const resolutionResult = ref<{ file: File; isValid: boolean }[]>([]);
const imageSlices = ref<string[]>([]);
const compressedFile = ref<File | null>(null);

// 分辨率检查的最小宽度
const minWidth = 800; 
// 分辨率检查的最小高度
const minHeight = 600; 
// 图片切片的高度
const sliceHeight = 300; 
// 图片压缩配置
const compressionConfig = {
    quality: 0.8,
    maxWidth: 1000,
    maxHeight: 1000
};

const handleFileUpload = async (event: Event) => {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        try {
            // 检查图片分辨率
            const resolutionCheckResult = await checkImageResolutions([file] as FileList, minWidth, minHeight);
            resolutionResult.value = resolutionCheckResult;

            // 切片图片
            const slices = await sliceImage(file, sliceHeight);
            imageSlices.value = slices;

            // 压缩图片
            const compressed = await compressImage(file, compressionConfig);
            compressedFile.value = compressed;
        } catch (error) {
            console.error('处理图片时出错:', error);
        }
    }
};
</script>

ElementPlus 集成示例

如果你在 Vue 3 项目中使用 ElementPlus，可以将 image-processing-suite 与 ElementPlus 的组件（如 el-upload）集成。以下是一个示例：

<template>
    <el-upload
        action="#"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :auto-upload="false"
        multiple
    >
        <el-button type="primary">点击上传图片</el-button>
    </el-upload>
    <div v-if="checkResults.length > 0">
        <el-alert
            v-for="(result, index) in checkResults"
            :key="index"
            :title="`${result.file.name}: ${result.isValid ? '分辨率符合要求' : '分辨率不符合要求'}`"
            :type="result.isValid ? 'success' : 'error'"
            :closable="false"
        />
    </div>
    <div v-if="slicedImages.length > 0">
        <img v-for="(slice, index) in slicedImages" :key="index" :src="slice" alt="图片切片" />
    </div>
    <div v-if="compressedFiles.length > 0">
        <p v-for="(file, index) in compressedFiles" :key="index">压缩后的文件名: {{ file.name }}</p>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { checkImageResolutions, sliceImage, compressImage } from 'image-processing-suite';

const checkResults = ref<{ file: File; isValid: boolean }[]>([]);
const slicedImages = ref<string[]>([]);
const compressedFiles = ref<File[]>([]);

// 分辨率检查的最小宽度
const minWidth = 800; 
// 分辨率检查的最小高度
const minHeight = 600; 
// 图片切片的高度
const sliceHeight = 300; 
// 图片压缩配置
const compressionConfig = {
    quality: 0.8,
    maxWidth: 1000,
    maxHeight: 1000
};

const beforeUpload = async (file: File | File[]) => {
    const files = Array.isArray(file) ? file : [file];
    const results = await checkImageResolutions(files as FileList, minWidth, minHeight);
    checkResults.value = results;
    const validFiles = results.filter(result => result.isValid).map(result => result.file);

    for (const validFile of validFiles) {
        const slices = await sliceImage(validFile, sliceHeight);
        slicedImages.value.push(...slices);

        const compressed = await compressImage(validFile, compressionConfig);
        compressedFiles.value.push(compressed);
    }

    return validFiles.length > 0;
};

const handleChange = (file: File, fileList: File[]) => {
    // 你可以在这里处理文件列表变化的逻辑
};
</script>

API 文档

checkSingleImageResolution(file: File, minWidth: number, minHeight: number): Promise<boolean>

描述: 检查单张图片的分辨率是否满足指定的最小宽度和高度要求。
- 参数:
  - file: 要检查的图片文件。
  - minWidth: 最小宽度要求。
  - minHeight: 最小高度要求。
- 返回值: 一个 Promise，解析为一个 boolean 值，表示图片分辨率是否符合要求。

checkImageResolutions(files: FileList | null, minWidth: number, minHeight: number): Promise<ResolutionCheckResult[]>

描述: 检查多张图片的分辨率是否满足指定的最小宽度和高度要求。
- 参数:
  - files: 包含要检查图片的 FileList 对象，可以为 null。
  - minWidth: 最小宽度要求。
  - minHeight: 最小高度要求。
- 返回值: 一个 Promise，解析为一个 ResolutionCheckResult 对象数组，每个对象包含文件和一个布尔值，表示其分辨率是否符合要求。

sliceImage(file: File, sliceHeight: number): Promise<string[]>

描述: 将图片切成指定高度的多个切片。
- 参数:
  - file: 要切片的图片文件。
  - sliceHeight: 每个切片的高度。
- 返回值: 一个 Promise，解析为一个 DataURL 字符串数组，表示图片的每个切片。

compressImage(file: File, config: ImageCompressionConfig = {}): Promise<File>

描述: 根据指定的配置压缩图片。
- 参数:
  - file: 要压缩的图片文件。
  - config: 可选的压缩配置对象，可包含以下属性：
  - quality: 一个介于 0 到 1 之间的数字，表示压缩质量，默认值为 0.8。
  - maxWidth: 压缩后图片的最大宽度。
  - maxHeight: 压缩后图片的最大高度。
- 返回值: 一个 Promise，解析为压缩后的 File 对象。

Installation

You can install the image-processing-suite package via npm or yarn:

npm install image-processing-suite

Or using yarn:

yarn add image-processing-suite

Usage

Global Installation

First, you need to globally install the plugin in your Vue 3 application. In your main entry file (usually main.ts or main.js), import and use the plugin:

import { createApp } from 'vue';
import App from './App.vue';
import ImageProcessingSuite from 'image-processing-suite';

const app = createApp(App);
app.use(ImageProcessingSuite);
app.mount('#app');

Using in a Component

Basic Example （vue3）

Here is a simple example of using the plugin's functions in a Vue 3 component:

<template>
  <input type="file" @change="handleFileUpload" />
  <div v-if="resolutionResult.length > 0">
    <p v-for="(result, index) in resolutionResult" :key="index">
      {{ result.file.name }}: {{ result.isValid ? 'Resolution meets requirements' : 'Resolution does not meet requirements' }}
    </p>
  </div>
  <img v-for="(slice, index) in imageSlices" :key="index" :src="slice" alt="Image slice" />
  <p v-if="compressedFile">Compressed file name: {{ compressedFile.name }}</p>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { checkImageResolutions, sliceImage, compressImage } from 'image-processing-suite';

  const resolutionResult = ref<{ file: File; isValid: boolean }[]>([]);
  const imageSlices = ref<string[]>([]);
  const compressedFile = ref<File | null>(null);

  // Minimum width for resolution check
  const minWidth = 800;
  // Minimum height for resolution check
  const minHeight = 600;
  // Height for image slicing
  const sliceHeight = 300;
  // Image compression configuration
  const compressionConfig = {
    quality: 0.8,
    maxWidth: 1000,
    maxHeight: 1000
  };

  const handleFileUpload = async (event: Event) => {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
      try {
        // Check image resolution
        const resolutionCheckResult = await checkImageResolutions([file] as FileList, minWidth, minHeight);
        resolutionResult.value = resolutionCheckResult;

        // Slice the image
        const slices = await sliceImage(file, sliceHeight);
        imageSlices.value = slices;

        // Compress the image
        const compressed = await compressImage(file, compressionConfig);
        compressedFile.value = compressed;
      } catch (error) {
        console.error('Error processing image:', error);
      }
    }
  };
</script>

Example with ElementPlus

If you are using ElementPlus in your Vue 3 project, you can integrate the image-processing-suite with ElementPlus components like el-upload. Here is an example:

<template>
  <el-upload
      action="#"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :auto-upload="false"
      multiple
  >
    <el-button type="primary">Click to upload images</el-button>
  </el-upload>
  <div v-if="checkResults.length > 0">
    <el-alert
        v-for="(result, index) in checkResults"
        :key="index"
        :title="`${result.file.name}: ${result.isValid ? 'Resolution meets requirements' : 'Resolution does not meet requirements'}`"
        :type="result.isValid ? 'success' : 'error'"
        :closable="false"
    />
  </div>
  <div v-if="slicedImages.length > 0">
    <img v-for="(slice, index) in slicedImages" :key="index" :src="slice" alt="Image slice" />
  </div>
  <div v-if="compressedFiles.length > 0">
    <p v-for="(file, index) in compressedFiles" :key="index">Compressed file name: {{ file.name }}</p>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { checkImageResolutions, sliceImage, compressImage } from 'image-processing-suite';

  const checkResults = ref<{ file: File; isValid: boolean }[]>([]);
  const slicedImages = ref<string[]>([]);
  const compressedFiles = ref<File[]>([]);

  // Minimum width for resolution check
  const minWidth = 800;
  // Minimum height for resolution check
  const minHeight = 600;
  // Height for image slicing
  const sliceHeight = 300;
  // Image compression configuration
  const compressionConfig = {
    quality: 0.8,
    maxWidth: 1000,
    maxHeight: 1000
  };

  const beforeUpload = async (file: File | File[]) => {
    const files = Array.isArray(file) ? file : [file];
    const results = await checkImageResolutions(files as FileList, minWidth, minHeight);
    checkResults.value = results;
    const validFiles = results.filter(result => result.isValid).map(result => result.file);

    for (const validFile of validFiles) {
      const slices = await sliceImage(validFile, sliceHeight);
      slicedImages.value.push(...slices);

      const compressed = await compressImage(validFile, compressionConfig);
      compressedFiles.value.push(compressed);
    }

    return validFiles.length > 0;
  };

  const handleChange = (file: File, fileList: File[]) => {
    // You can handle file list change logic here
  };
</script>

API Documentation

 checkSingleImageResolution(file: File, minWidth: number, minHeight: number): Promise<boolean>

Description: Checks if the resolution of a single image meets the specified minimum width and height requirements.
- Parameters:
  - file: The image file to be checked.
  - minWidth: The minimum width requirement.
  - minHeight: The minimum height requirement.
Returns: A Promise that resolves to a boolean indicating whether the image resolution meets the requirements.

 checkImageResolutions(files: FileList | null, minWidth: number, minHeight: number): Promise<ResolutionCheckResult[]>

Description: Checks if the resolutions of multiple images meet the specified minimum width and height requirements.
- Parameters:
  - files: A FileList object containing the images to be checked. Can be null.
  - minWidth: The minimum width requirement.
  - minHeight: The minimum height requirement.
Returns: A Promise that resolves to an array of ResolutionCheckResult objects, where each object contains the file and a boolean indicating whether its resolution meets the requirements.

 sliceImage(file: File, sliceHeight: number): Promise<string[]>

Description: Slices an image into multiple pieces with the specified height.
- Parameters:
  - file: The image file to be sliced.
  - sliceHeight: The height of each slice.
Returns: A Promise that resolves to an array of DataURL strings representing each slice of the image.

compressImage(file: File, config: ImageCompressionConfig = {}): Promise<File>

Description: Compresses an image with the specified configuration.
- Parameters:
  - file: The image file to be compressed.
  - config: An optional object with compression configuration. It can have the following properties:
    - quality: A number between 0 and 1 representing the compression quality. Default is 0.8.
    - maxWidth: The maximum width of the compressed image.
    - maxHeight: The maximum height of the compressed image.
Returns: A Promise that resolves to the compressed File object.

License

This project is licensed under the MIT License. See the LICENSE file for details.

vue3 image-processing resolution-checker image-slicer image-compressor

5 months ago

5 months ago

5 months ago

5 months ago