SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ add image EXIF information extraction function

Browse Source
This commit is contained in:
landaiqing
2025-01-20 19:26:41 +08:00
parent e1ee33946d
commit 0255e6b75e
9 changed files with 244 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -8,6 +8,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AAvatar: typeof import('ant-design-vue/es')['Avatar']
AAvatarGroup: typeof import('ant-design-vue/es')['AvatarGroup']
ABadge: typeof import('ant-design-vue/es')['Badge']
AButton: typeof import('ant-design-vue/es')['Button']
ACard: typeof import('ant-design-vue/es')['Card']

20
package.json
View File

@@ -31,7 +31,7 @@
"@types/animejs": "^3.1.12",
"@types/crypto-js": "^4.2.2",
"@types/json-stringify-safe": "^5.0.3",
"@types/node": "^22.10.6",
"@types/node": "^22.10.7",
"@types/nprogress": "^0.2.3",
"@vladmandic/face-api": "^1.7.14",
"@vuepic/vue-datepicker": "^11.0.1",
@@ -46,15 +46,16 @@
"crypto-js": "^4.2.0",
"echarts": "^5.6.0",
"eslint": "9.18.0",
"exifr": "^7.1.3",
"go-captcha-vue": "^2.0.5",
"gsap": "^3.12.5",
"gsap": "^3.12.7",
"jsencrypt": "^3.3.2",
"json-stringify-safe": "^5.0.1",
"less": "^4.2.1",
"less": "^4.2.2",
"localforage": "^1.10.0",
"nprogress": "^0.2.0",
"nsfwjs": "^4.2.1",
"pinia": "^2.3.0",
"pinia": "^2.3.1",
"pinia-plugin-persistedstate-2": "^2.0.28",
"qrcode": "^1",
"seedrandom": "^3.0.5",
@@ -62,7 +63,7 @@
"unplugin-auto-import": "^19.0.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.2",
"vite-plugin-node-polyfills": "^0.22.0",
"vite-plugin-node-polyfills": "^0.23.0",
"vue": "^3.5.13",
"vue-dompurify-html": "^5.2.0",
"vue-i18n": "^11.0.1",
@@ -75,21 +76,18 @@
"@vitejs/plugin-vue": "^5.2.1",
"eslint-plugin-vue": "^9.32.0",
"globals": "^15.14.0",
"sass": "^1.83.3",
"sass": "^1.83.4",
"typescript": "^5.7.3",
"typescript-eslint": "^8.20.0",
"unplugin-vue-components": "^28.0.0",
"vite": "^6.0.7",
"vite": "^6.0.9",
"vite-plugin-bundle-obfuscator": "1.4.0",
"vite-plugin-chunk-split": "^0.5.0",
"vue-tsc": "2.2.0"
},
"overrides": {
"vite-plugin-node-polyfills": {
"vite": "^6.0.7"
},
"vite-plugin-chunk-split": {
"vite": "^6.0.7"
"vite": "^6.0.9"
}
}
}

2
src/api/file/index.ts → src/api/storage/index.ts
View File

@@ -1,7 +1,7 @@
import {service} from "@/utils/alova/service.ts";
export const uploadFile = (formData) => {
return service.Post('/api/auth/file/uploads', formData, {
return service.Post('/api/auth/storage/uploads', formData, {
meta: {
ignoreToken: false,
signature: false,

2
src/store/modules/commentStore.ts
View File

@@ -5,7 +5,7 @@ import {cancelCommentLikeApi, commentLikeApi, commentListApi, replyListApi} from
import {message} from "ant-design-vue";
import {getSlideCaptchaDataApi} from "@/api/captcha";
import QQ_EMOJI from "@/constant/qq_emoji.ts";
import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
import {NSFWJS} from "nsfwjs";
import i18n from "@/locales";
import localForage from "localforage";

21
src/store/modules/uploadStore.ts
View File

@@ -1,8 +1,12 @@
import localforage from 'localforage';
interface UploadPredictResult {
isAnime: boolean;
hasFace: boolean;
objectArray: string[] | unknown[];
landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none' | undefined;
landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
isScreenshot: boolean;
topCategory: string | undefined;
}
@@ -11,11 +15,14 @@ export const useUploadStore = defineStore(
() => {
const openUploadDrawer = ref<boolean>(false);
const exifData = ref<any>();
const predictResult = reactive<UploadPredictResult>({
isAnime: false,
hasFace: false,
objectArray: [],
landscape: undefined as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none' | undefined,
landscape: 'none',
isScreenshot: false,
topCategory: ''
});
/**
@@ -32,21 +39,25 @@ export const useUploadStore = defineStore(
predictResult.isAnime = false;
predictResult.hasFace = false;
predictResult.objectArray = [];
predictResult.landscape = undefined;
predictResult.landscape = 'none';
predictResult.isScreenshot = false;
predictResult.topCategory = '';
}
return {
openUploadDrawer,
predictResult,
exifData,
openUploadDrawerFn,
clearPredictResult
clearPredictResult,
};
},
{
// 开启数据持久化
persistedState: {
persist: false,
storage: localStorage,
storage: localforage,
key: 'upload',
includePaths: []
}

2
src/store/modules/upscaleStore.ts
View File

@@ -1,5 +1,5 @@
import {defineStore} from 'pinia';
import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
import i18n from "@/locales";
import {NSFWJS} from "nsfwjs";

88
src/utils/imageUtils/isScreenshot.ts Normal file
View File

@@ -0,0 +1,88 @@
import exifr from 'exifr';
/**
* 判断图片是否是截图
* @param {File} file - 要判断的图片文件
* @returns {Promise<boolean>} - 返回是否是截图
*/
async function isScreenshot(file) {
// 常见屏幕宽高比
const commonAspectRatios = [16 / 9, 16 / 10, 4 / 3, 3 / 2, 1];
const aspectRatioTolerance = 0.02; // 容差，用于宽高比校验
const maxScreenshotSizeMB = 2; // 截图通常较小，限制最大 2MB
// 文件名关键词（大小写不敏感）
const screenshotFilenameKeywords = [
'screenshot', '屏幕截图', '截屏', 'Snip', 'Capture', 'Snapshot', '截图'
];
try {
// 文件名匹配
const fileName = file.name.toLowerCase();
const matchesFilename = screenshotFilenameKeywords.some(keyword =>
fileName.includes(keyword.toLowerCase())
);
if (matchesFilename) {
return true; // 如果文件名包含截图相关关键词，直接判断为截图
}
// 提取 EXIF 数据
const exifData = await exifr.parse(file, ['ImageWidth', 'ImageHeight', 'Software', 'XResolution', 'YResolution']);
const {ImageWidth, ImageHeight, Software} = exifData || {};
// 如果图片没有宽高信息，直接返回 false
if (!ImageWidth || !ImageHeight) {
return false;
}
// 校验宽高比是否接近常见屏幕比例
const aspectRatio = Math.max(ImageWidth, ImageHeight) / Math.min(ImageWidth, ImageHeight);
const matchesAspectRatio = commonAspectRatios.some(
(ratio) => Math.abs(ratio - aspectRatio) <= aspectRatioTolerance
);
// 如果宽高比匹配，进一步检查
if (matchesAspectRatio) {
// 检查软件标记是否与截图工具相关
const screenshotSoftwareKeywords = ['Screenshot', 'Snipping Tool', 'Screen Capture', 'Grab', 'Sketch'];
if (Software && screenshotSoftwareKeywords.some((keyword) => Software.includes(keyword))) {
return true;
}
// 检查文件大小（截图通常较小）
const fileSizeMB = file.size / (1024 * 1024);
if (fileSizeMB <= maxScreenshotSizeMB) {
return true;
}
}
// 无 EXIF 数据或不匹配时，通过宽高比的容差检测
const img: any = await getImageDimensions(file);
const imgAspectRatio = img.width / img.height;
const imgMatchesAspectRatio = commonAspectRatios.some(
(ratio) => Math.abs(ratio - imgAspectRatio) <= aspectRatioTolerance
);
return imgMatchesAspectRatio;
} catch (error) {
console.error('判断截图时发生错误:', error);
return false;
}
}
/**
* 获取图片的宽高信息（无 EXIF 时使用）
* @param {File} file
* @returns {Promise<{width: number, height: number}>}
*/
function getImageDimensions(file) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve({width: img.width, height: img.height});
img.onerror = reject;
img.src = URL.createObjectURL(file);
});
}
export default isScreenshot;

4
src/utils/nsfw/nsfw.ts → src/utils/tfjs/nsfw.ts
View File

@@ -29,9 +29,9 @@ const predictNSFW = async (model: NSFWJS, image: tf.Tensor3D | ImageData | HTMLI
const predictions = await model.classify(image, 5);
// 定义阈值与对应的类别
const thresholds = {
'Porn': 0.5,
'Porn': 0.6,
'Hentai': 0.3,
'Sexy': 0.5
'Sexy': 0.6
};
// 使用一个变量来确定是否为色情内容

177
src/views/Photograph/ImageUpload/ImageUpload.vue
View File

@@ -36,7 +36,8 @@
<p v-show="predicting" class="ant-upload-hint">
AI 正在识别图片，请稍候...
</p>
<AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="progressPercent" status="active"
<AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="progressPercent"
:status="progressStatus"
:show-info="true" size="small" type="line" v-show="predicting" style="width: 80%"/>
</AUploadDragger>
</div>
@@ -46,20 +47,32 @@
import useStore from "@/store";
import type {UploadProps} from 'ant-design-vue';
import {message} from "ant-design-vue";
import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
import i18n from "@/locales";
import {NSFWJS} from "nsfwjs";
import {animePredictImage} from "@/utils/tfjs/anime_classifier.ts";
import {animePredictImagePro} from "@/utils/tfjs/anime_classifier_pro.ts";
import {fnDetectFace} from "@/utils/tfjs/face_extraction.ts";
import {cocoSsdPredict} from "@/utils/tfjs/mobilenet.ts";
import {predictLandscape} from "@/utils/tfjs/landscape_recognition.ts";
import {useRequest} from 'alova/client';
import {uploadFile} from "@/api/file";
import {uploadFile} from "@/api/storage";
import imageCompression from "browser-image-compression";
import exifr from 'exifr';
import isScreenshot from "@/utils/imageUtils/isScreenshot.ts";
import {getCategoryByLabel} from "@/constant/coco_ssd_label_category.ts";
const predicting = ref<boolean>(false);
const progressPercent = ref<number>(0);
const progressStatus = ref<string>('active');
// 压缩图片配置
const options = {
maxSizeMB: 0.4,
maxWidthOrHeight: 750,
maxIteration: 2,
useWebWorker: true,
};
const upload = useStore().upload;
const image: HTMLImageElement = document.createElement('img');
@@ -84,9 +97,11 @@ async function beforeUpload(file: File) {
predicting.value = true;
upload.clearPredictResult();
progressPercent.value = 0; // 初始化进度条
progressStatus.value = 'active'; // 开始状态
// 压缩图片
const compressedFile = await imageCompression(file, options);
// 创建图片对象
image.src = URL.createObjectURL(file);
image.src = URL.createObjectURL(compressedFile);
image.addEventListener('webglcontextlost', (_event) => {
window.location.reload();
@@ -107,54 +122,86 @@ async function beforeUpload(file: File) {
});
};
// 图片 NSFW 检测
const nsfw: NSFWJS = await initNSFWJs();
await smoothUpdateProgress(10, 500); // 平滑更新进度条
try {
// NSFW 检测
const nsfw: NSFWJS = await initNSFWJs();
await smoothUpdateProgress(30, 500); // 平滑更新进度条
const isNSFW: boolean = await predictNSFW(nsfw, image);
await smoothUpdateProgress(20, 500); // 平滑更新进度条
const isNSFW: boolean = await predictNSFW(nsfw, image);
await smoothUpdateProgress(50, 500); // 平滑更新进度条
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
predicting.value = false;
progressPercent.value = 100; // 重置进度条
progressStatus.value = 'exception'; // 异常状态
return false;
}
// 提取 EXIF 数据
const exifData = await extractAllExifData(file);
if (exifData) {
upload.exifData = exifData;
}
// 判断是否为截图
upload.predictResult.isScreenshot = await isScreenshot(file);
// 动漫类型识别
const prediction: string = await animePredictImagePro(image);
await smoothUpdateProgress(70, 500); // 平滑更新进度条
// 如果是动漫类型，直接返回
if ((prediction === 'Furry' || prediction === 'Anime')) {
upload.predictResult.isAnime = true;
predicting.value = false;
progressPercent.value = 100; // 直接完成
return true;
}
// 人脸检测
const faceImageData = await fnDetectFace(image);
if (faceImageData) {
upload.predictResult.hasFace = true;
predicting.value = false;
progressPercent.value = 100; // 直接完成
return true;
}
//目标检测和风景检测并行处理
const [cocoResults, landscape] = await Promise.all([
cocoSsdPredict(image), // 目标检测
predictLandscape(image), // 风景检测
]);
await smoothUpdateProgress(100, 500); // 平滑更新进度条
if (cocoResults.length > 0) {
// 取置信度最高的结果
// 如果只有一个结果，直接取第一个
if (cocoResults.length === 1) {
upload.predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
} else {
// 多个结果时，按 score 排序，取置信度最高的结果
const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
upload.predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
}
const classSet = new Set(cocoResults.map(result => result.class));
upload.predictResult.objectArray = Array.from(classSet);
}
upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
predicting.value = false;
return true;
} catch (error) {
console.error('识别过程中发生错误:', error);
predicting.value = false;
progressPercent.value = 0; // 重置进度条
return false;
} finally {
image.removeEventListener('webglcontextlost', () => void 0);
}
// Step 1: 动漫预测
const prediction1 = await animePredictImage(image);
await smoothUpdateProgress(40, 500); // 平滑更新进度条
const prediction2 = await animePredictImagePro(image);
await smoothUpdateProgress(60, 500); // 平滑更新进度条
upload.predictResult.isAnime = prediction1 === 'Anime' && (prediction2 === 'Furry' || prediction2 === 'Anime');
// Step 2: 人脸检测
const faceImageData = await fnDetectFace(image);
await smoothUpdateProgress(80, 500); // 平滑更新进度条
upload.predictResult.hasFace = !!faceImageData;
// Step 3: 目标识别
const cocoResults = await cocoSsdPredict(image);
await smoothUpdateProgress(90, 500); // 平滑更新进度条
if (cocoResults.length > 0) {
const classSet = new Set(cocoResults.map(result => result.class));
upload.predictResult.objectArray = Array.from(classSet);
}
// Step 4: 风景识别
upload.predictResult.landscape = await predictLandscape(image);
await smoothUpdateProgress(100, 500); // 平滑更新进度条
// 完成
predicting.value = false;
image.removeEventListener('webglcontextlost', () => void 0);
return true;
}
const {uploading, send: submitFile, abort} = useRequest(uploadFile, {
immediate: false,
debounce: 500,
@@ -168,11 +215,10 @@ async function customUploadRequest(file: any) {
const formData = new FormData();
formData.append("file", file.file);
formData.append("result", JSON.stringify({
uid: file.file.uid,
fileName: file.file.name, // 添加文件名
fileType: file.file.type, // 添加文件类型
detectionResult: upload.predictResult,
formData.append("data", JSON.stringify({
fileType: file.file.type,
...upload.predictResult,
exif: JSON.stringify(upload.exifData) || '',
}));
watch(
() => uploading.value,
@@ -183,7 +229,11 @@ async function customUploadRequest(file: any) {
},
);
submitFile(formData).then((response: any) => {
file.onSuccess(response.data, file);
if (response && response.code === 200) {
file.onSuccess(response.data, file);
} else {
file.onError(response.data, file);
}
}).catch(file.onError);
}
@@ -206,6 +256,29 @@ function removeFile(file: any) {
fileList.value = fileList.value.filter((item: any) => item.uid !== file.uid);
}
/**
* 提取 EXIF 数据
* @param {File} file - 图片文件
* @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
*/
async function extractAllExifData(file) {
const supportedFormats = ['image/jpeg', 'image/tiff', 'image/iiq', 'image/heif', 'image/heic', 'image/avif', 'image/png'];
// 判断文件格式是否支持
if (!supportedFormats.includes(file.type)) {
return null;
}
try {
// 提取所有 EXIF 数据
return await exifr.parse(file, {ifd0: false, exif: true} as any);
} catch (error) {
console.error("提取 EXIF 数据失败:", error);
return null;
}
}
</script>
<style lang="less" scoped>