This commit is contained in:
sijinhui
2024-05-17 10:22:36 +08:00
parent aac77eb980
commit 722bc7f638
3 changed files with 60 additions and 90 deletions

View File

@@ -3,39 +3,9 @@ import heic2any from "heic2any";
export function compressImage(file: File, maxSize: number): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (readerEvent: any) => {
const image = new Image();
image.onload = () => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let width = image.width;
let height = image.height;
let quality = 0.9;
let dataUrl;
do {
canvas.width = width;
canvas.height = height;
ctx?.clearRect(0, 0, canvas.width, canvas.height);
ctx?.drawImage(image, 0, 0, width, height);
dataUrl = canvas.toDataURL("image/jpeg", quality);
if (dataUrl.length < maxSize) break;
if (quality > 0.5) {
// Prioritize quality reduction
quality -= 0.1;
} else {
// Then reduce the size
width *= 0.9;
height *= 0.9;
}
} while (dataUrl.length > maxSize);
resolve(dataUrl);
};
image.onerror = reject;
image.src = readerEvent.target.result;
reader.onload = () => {
// 直接解析为 Data URL
resolve(reader.result as string);
};
reader.onerror = reject;
@@ -51,4 +21,55 @@ export function compressImage(file: File, maxSize: number): Promise<string> {
reader.readAsDataURL(file);
});
// return new Promise((resolve, reject) => {
// const reader = new FileReader();
// reader.onload = (readerEvent: any) => {
// const image = new Image();
// image.onload = () => {
// let canvas = document.createElement("canvas");
// let ctx = canvas.getContext("2d");
// let width = image.width;
// let height = image.height;
// let quality = 0.9;
// let dataUrl;
//
// do {
// canvas.width = width;
// canvas.height = height;
// ctx?.clearRect(0, 0, canvas.width, canvas.height);
// ctx?.drawImage(image, 0, 0, width, height);
// dataUrl = canvas.toDataURL("image/jpeg", quality);
//
// if (dataUrl.length < maxSize) break;
//
// if (quality > 0.5) {
// // Prioritize quality reduction
// quality -= 0.1;
// } else {
// // Then reduce the size
// width *= 0.9;
// height *= 0.9;
// }
// } while (dataUrl.length > maxSize);
//
// resolve(dataUrl);
// };
// image.onerror = reject;
// image.src = readerEvent.target.result;
// };
// reader.onerror = reject;
//
// if (file.type.includes("heic")) {
// heic2any({ blob: file, toType: "image/jpeg" })
// .then((blob) => {
// reader.readAsDataURL(blob as Blob);
// })
// .catch((e) => {
// reject(e);
// });
// }
//
// reader.readAsDataURL(file);
// });
}