4.6.2-production (#518)

This commit is contained in:
Archer
2023-11-26 16:13:45 +08:00
committed by GitHub
parent 3acbf1ab17
commit f818260711
30 changed files with 477 additions and 283 deletions

View File

@@ -33,74 +33,98 @@ export const uploadFiles = ({
* compress image. response base64
* @param maxSize The max size of the compressed image
*/
export const compressImgAndUpload = ({
file,
export const compressBase64ImgAndUpload = ({
base64,
maxW = 200,
maxH = 200,
maxSize = 1024 * 100, // 100kb
expiredTime
}: {
base64: string;
maxW?: number;
maxH?: number;
maxSize?: number;
expiredTime?: Date;
}) => {
return new Promise<string>((resolve, reject) => {
const fileType = /^data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,/.exec(base64)?.[1] || 'image/jpeg';
const img = new Image();
img.src = base64;
img.onload = async () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxW) {
height *= maxW / width;
width = maxW;
}
} else {
if (height > maxH) {
width *= maxH / height;
height = maxH;
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) {
return reject('压缩图片异常');
}
ctx.drawImage(img, 0, 0, width, height);
const compressedDataUrl = canvas.toDataURL(fileType, 0.8);
// 移除 canvas 元素
canvas.remove();
if (compressedDataUrl.length > maxSize) {
return reject('图片太大了');
}
try {
const src = await postUploadImg(compressedDataUrl, expiredTime);
resolve(src);
} catch (error) {
reject(error);
}
};
});
};
export const compressImgFileAndUpload = async ({
file,
maxW,
maxH,
maxSize,
expiredTime
}: {
file: File;
maxW?: number;
maxH?: number;
maxSize?: number;
expiredTime?: Date;
}) =>
new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
}) => {
const reader = new FileReader();
reader.readAsDataURL(file);
const base64 = await new Promise<string>((resolve, reject) => {
reader.onload = async () => {
const img = new Image();
// @ts-ignore
img.src = reader.result;
img.onload = async () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxW) {
height *= maxW / width;
width = maxW;
}
} else {
if (height > maxH) {
width *= maxH / height;
height = maxH;
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) {
return reject('压缩图片异常');
}
ctx.drawImage(img, 0, 0, width, height);
const compressedDataUrl = canvas.toDataURL(file.type, 0.8);
// 移除 canvas 元素
canvas.remove();
if (compressedDataUrl.length > maxSize) {
return reject('图片太大了');
}
const src = await (async () => {
try {
const src = await postUploadImg(compressedDataUrl, expiredTime);
return src;
} catch (error) {
return compressedDataUrl;
}
})();
resolve(src);
};
resolve(reader.result as string);
};
reader.onerror = (err) => {
console.log(err);
reject('压缩图片异常');
};
});
return compressBase64ImgAndUpload({
base64,
maxW,
maxH,
maxSize,
expiredTime
});
};