93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import { UPLOAD_URL } from "@/app/constant";
|
|
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.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);
|
|
});
|
|
}
|
|
|
|
export function base64Image2Blob(base64Data: string, contentType: string) {
|
|
const byteCharacters = atob(base64Data);
|
|
const byteNumbers = new Array(byteCharacters.length);
|
|
for (let i = 0; i < byteCharacters.length; i++) {
|
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
|
}
|
|
const byteArray = new Uint8Array(byteNumbers);
|
|
return new Blob([byteArray], { type: contentType });
|
|
}
|
|
|
|
export function uploadImage(file: Blob): Promise<string> {
|
|
const body = new FormData();
|
|
body.append("file", file);
|
|
return fetch(UPLOAD_URL, {
|
|
method: "post",
|
|
body,
|
|
mode: "cors",
|
|
credentials: "include",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
console.log("res", res);
|
|
if (res?.code == 0 && res?.data) {
|
|
return res?.data;
|
|
}
|
|
throw Error(`upload Error: ${res?.msg}`);
|
|
});
|
|
}
|
|
|
|
export function removeImage(imageUrl: string) {
|
|
return fetch(imageUrl, {
|
|
method: "DELETE",
|
|
mode: "cors",
|
|
credentials: "include",
|
|
});
|
|
}
|