Image Resolution Checker

A Vue 3 plugin to check image resolution before uploading.

Installation

npm install image-resolution-checker

Usage

import { createApp } from 'vue';
import App from './App.vue';
import ImageResolutionChecker from 'image-resolution-checker';

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

In your component:

<template>
    <input type="file" multiple @change="handleFileUpload" />
    <div v-for="(result, index) in checkResults" :key="index">
        <p>{{ result.file.name }}: {{ result.isValid ? 'Resolution meets requirements' : 'Resolution does not meet requirements' }}</p>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { checkImageResolutions } from 'image-resolution-checker';

const checkResults = ref<{ file: File; isValid: boolean }[]>([]);
// 每个页面独立设置最小宽度
const minWidth = 1200; 
// 每个页面独立设置最小高度
const minHeight = 800; 

const handleFileUpload = async (event: Event) => {
    const target = event.target as HTMLInputElement;
    const files = target.files;
    if (files) {
        checkResults.value = await checkImageResolutions(files, minWidth, minHeight);
    }
};
</script>

代码解释

1. checkSingleImageResolution 函数：负责检查单张图片的分辨率是否满足指定的最小宽度和最小高度要求，使用 FileReader 和 Image 对象来读取和加载图片，最终返回一个 Promise 表示检查结果。
2. checkImageResolutions 函数：可以处理多张图片的分辨率检查，它会遍历传入的 FileList，调用 checkSingleImageResolution 函数对每张图片进行检查，并将结果存储在数组中返回。
3. ImageResolutionChecker 插件：通过 install 方法将 checkImageResolutions 函数挂载到 Vue 应用的全局属性上，方便在组件中使用。
4. 组件使用：在组件中引入 checkImageResolutions 函数，在文件上传事件中调用该函数，并根据返回结果显示每张图片的分辨率检查情况。

代码实例（element-plus+vue3的上传组件实例）

<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>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { checkImageResolutions } from 'image-resolution-checker';

// 每个页面独立设置的最小宽度
const minWidth = 800; 
// 每个页面独立设置的最小高度
const minHeight = 600; 
const checkResults = ref<{ file: File; isValid: boolean }[]>([]);

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);
  // 如果有符合要求的文件，允许上传；否则阻止上传
  return validFiles.length > 0;
};

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

代码解释 使用 el-upload 组件：

• 在组件模板中使用 ElementPlus 的 el-upload 组件来实现图片上传功能。
• beforeUpload 钩子：在 beforeUpload 钩子中调用 checkImageResolutions 函数来检查上传的图片分辨率。
• 根据检查结果更新 checkResults 状态，并返回符合分辨率要求的文件，以决定是否允许上传。

• 在 el-alert 组件中，通过 :type="result.isValid ? 'success' : 'error'" 动态绑定 type 属性。
  • 当 result.isValid 为 true 时，即图片分辨率符合要求，el-alert 的类型为 success，显示绿色的提示框；
  • 当 result.isValid 为 false 时，即图片分辨率不符合要求，el-alert 的类型为 error，显示红色的提示框。
  • 这样可以让用户更直观地了解每张图片的检查结果。