compress image
This commit is contained in:
weichengwu
parent
dfbf82670b
commit
3032f21870
|
|
@ -628,7 +628,60 @@ function resetMarriageInfo() {
|
|||
const handleScanClick = () => {
|
||||
ocrUploadId.value?.click()
|
||||
}
|
||||
const handleImageChange = () => {
|
||||
const MAX_UPLOAD_KB = 500;
|
||||
|
||||
const compressImage = (file: File, maxSizeKB = MAX_UPLOAD_KB): Promise<File> => {
|
||||
const limit = maxSizeKB * 1024;
|
||||
if (file.size <= limit) return Promise.resolve(file);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const img = new Image();
|
||||
img.onload = async () => {
|
||||
const tryCompress = async (scale: number) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = Math.max(1, Math.round(img.width * scale));
|
||||
canvas.height = Math.max(1, Math.round(img.height * scale));
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) throw new Error('无法获取画布上下文');
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
let quality = 0.9;
|
||||
let dataUrl = canvas.toDataURL(file.type || 'image/jpeg', quality);
|
||||
while (dataUrl.length / 1024 > maxSizeKB && quality > 0.4) {
|
||||
quality -= 0.1;
|
||||
dataUrl = canvas.toDataURL(file.type || 'image/jpeg', quality);
|
||||
}
|
||||
const blob = await fetch(dataUrl).then(res => res.blob());
|
||||
return blob;
|
||||
};
|
||||
|
||||
try {
|
||||
let scale = Math.min(1, Math.sqrt(limit / file.size));
|
||||
for (let attempt = 0; attempt < 3; attempt++) {
|
||||
const blob = await tryCompress(scale);
|
||||
if (blob.size <= limit) {
|
||||
resolve(new File([blob], file.name, { type: blob.type }));
|
||||
return;
|
||||
}
|
||||
// 尺寸继续缩小后再压缩一轮
|
||||
scale *= 0.7;
|
||||
}
|
||||
reject(new Error('图片压缩失败，请重试'));
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
};
|
||||
img.onerror = () => reject(new Error('图片加载失败，请重试'));
|
||||
img.src = reader.result as string;
|
||||
};
|
||||
reader.onerror = () => reject(new Error('读取图片失败，请重试'));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
};
|
||||
|
||||
const handleImageChange = async () => {
|
||||
const file = ocrUploadId.value?.files?.[0]
|
||||
if (!file) {
|
||||
showDialog({
|
||||
|
|
@ -637,53 +690,48 @@ const handleImageChange = () => {
|
|||
return
|
||||
}
|
||||
|
||||
// 调用上传OCR图片接口
|
||||
const formFormData = new FormData()
|
||||
formFormData.append('file', file)
|
||||
|
||||
showLoading();
|
||||
apiService.uploadOcrImage(formFormData).then((response: any) => {
|
||||
apiService.marriageParseOcrInfo({
|
||||
try {
|
||||
const compressedFile = await compressImage(file);
|
||||
const formFormData = new FormData()
|
||||
formFormData.append('file', compressedFile)
|
||||
|
||||
const response: any = await apiService.uploadOcrImage(formFormData);
|
||||
const res: any = await apiService.marriageParseOcrInfo({
|
||||
mobile: formData.value.phone,
|
||||
smsCode: formData.value.smsCode,
|
||||
uploadId: response.data.uploadId,
|
||||
}).then((res: any) => {
|
||||
if (res?.data?.parsed?.marriageNo) {
|
||||
formData.value.marriageNo = res?.data?.parsed?.marriageNo || '';
|
||||
formData.value.husbandName = res?.data?.parsed?.husbandName || '';
|
||||
formData.value.wifeName = res?.data?.parsed?.wifeName || '';
|
||||
formData.value.registerDate = res?.data?.parsed?.registerDate || '';
|
||||
formData.value.certificateHolder = res?.data?.parsed?.certificateHolder || '';
|
||||
formData.value.husbandId = res?.data?.parsed?.husbandId || '';
|
||||
formData.value.wifeId = res?.data?.parsed?.wifeId || '';
|
||||
formData.value.husbandGender = res?.data?.parsed?.husbandGender || '';
|
||||
formData.value.wifeGender = res?.data?.parsed?.wifeGender || '';
|
||||
formData.value.husbandBirthDate = res?.data?.parsed?.husbandBirthDate || '';
|
||||
formData.value.wifeBirthDate = res?.data?.parsed?.wifeBirthDate || '';
|
||||
formData.value.husbandNationality = res?.data?.parsed?.husbandNationality || '';
|
||||
formData.value.wifeNationality = res?.data?.parsed?.wifeNationality || '';
|
||||
persistMarriageInfo();
|
||||
} else {
|
||||
showDialog({
|
||||
message: '结婚登记号信息提取失败，请重试！',
|
||||
});
|
||||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||||
}
|
||||
}).catch((error) => {
|
||||
});
|
||||
|
||||
if (res?.data?.parsed?.marriageNo) {
|
||||
formData.value.marriageNo = res?.data?.parsed?.marriageNo || '';
|
||||
formData.value.husbandName = res?.data?.parsed?.husbandName || '';
|
||||
formData.value.wifeName = res?.data?.parsed?.wifeName || '';
|
||||
formData.value.registerDate = res?.data?.parsed?.registerDate || '';
|
||||
formData.value.certificateHolder = res?.data?.parsed?.certificateHolder || '';
|
||||
formData.value.husbandId = res?.data?.parsed?.husbandId || '';
|
||||
formData.value.wifeId = res?.data?.parsed?.wifeId || '';
|
||||
formData.value.husbandGender = res?.data?.parsed?.husbandGender || '';
|
||||
formData.value.wifeGender = res?.data?.parsed?.wifeGender || '';
|
||||
formData.value.husbandBirthDate = res?.data?.parsed?.husbandBirthDate || '';
|
||||
formData.value.wifeBirthDate = res?.data?.parsed?.wifeBirthDate || '';
|
||||
formData.value.husbandNationality = res?.data?.parsed?.husbandNationality || '';
|
||||
formData.value.wifeNationality = res?.data?.parsed?.wifeNationality || '';
|
||||
persistMarriageInfo();
|
||||
} else {
|
||||
showDialog({
|
||||
message: error?.msg || '结婚登记号信息提取失败，请重试！',
|
||||
message: '结婚登记号信息提取失败，请重试！',
|
||||
});
|
||||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
})
|
||||
}).catch((error) => {
|
||||
}
|
||||
} catch (error: any) {
|
||||
showDialog({
|
||||
message: error?.msg || '结婚登记号信息提取失败，请重试！',
|
||||
message: error?.msg || error?.message || '结婚登记号信息提取失败，请重试！',
|
||||
});
|
||||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||||
} finally {
|
||||
hideLoading();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const goToIdUpload = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue