feat: 本地图片文件压缩

src/components/ConfigDialog.tsx

@@ -15,6 +15,8 @@ import {
     randomString,
     wrapThemeDefaultSounds,
     LAST_UPLOAD_TIME_STORAGE_KEY,
+    canvasToFile,
+    createCanvasByImgSrc,
 } from '../utils';
 import { copy } from 'clipboard';
 import { CloseIcon } from './CloseIcon';
@@ -163,7 +165,7 @@ const ConfigDialog: FC<{
         type: 'bgm' | 'background' | 'sound' | 'icon';
         file?: File;
         idx?: number;
-    }) => void = ({ type, file, idx }) => {
+    }) => void = async ({ type, file, idx }) => {
         if (!file) return;
         switch (type) {
             case 'bgm':
@@ -181,16 +183,20 @@ const ConfigDialog: FC<{
                 break;
             case 'background':
                 setBackgroundError('');
-                if (enableFileSizeValidate && file.size > 80 * 1024) {
+                try {
-                    return setBackgroundError('请选择80k以内全损画质的图片');
+                    const compressFile = await canvasToFile({
-                }
+                        canvas: await createCanvasByImgSrc({
-                getFileBase64String(file)
+                            imgSrc: await getFileBase64String(file),
-                    .then((res) => {
+                        }),
-                        updateCustomTheme('background', res);
+                        maxFileSize: 20 * 1024,
-                    })
-                    .catch((e) => {
-                        setBackgroundError(e);
                     });
+                    const compressFileBase64 = await getFileBase64String(
+                        compressFile
+                    );
+                    updateCustomTheme('background', compressFileBase64);
+                } catch (e: any) {
+                    setBackgroundError(e);
+                }
                 break;
             case 'sound':
                 setSoundError('');
@@ -208,23 +214,27 @@ const ConfigDialog: FC<{
             case 'icon':
                 if (idx == null) return;
                 setIconErrors(makeIconErrors(idx, ''));
-                if (enableFileSizeValidate && file.size > 5 * 1024) {
+                try {
-                    return setIconErrors(
+                    const compressFile = await canvasToFile({
-                        makeIconErrors(idx, '请选择5k以内的图片文件')
+                        canvas: await createCanvasByImgSrc({
+                            imgSrc: await getFileBase64String(file),
+                        }),
+                        maxFileSize: 4 * 1024,
+                    });
+                    const compressFileBase64 = await getFileBase64String(
+                        compressFile
                     );
-                }
-                getFileBase64String(file)
-                    .then((res) => {
                     updateCustomTheme(
                         'icons',
                         customTheme.icons.map((icon, _idx) =>
-                                _idx === idx ? { ...icon, content: res } : icon
+                            _idx === idx
+                                ? { ...icon, content: compressFileBase64 }
+                                : icon
                         )
                     );
-                    })
+                } catch (e: any) {
-                    .catch((e) => {
                     setIconErrors(makeIconErrors(idx, e));
-                    });
+                }
                 break;
         }
     };
@@ -410,7 +420,7 @@ const ConfigDialog: FC<{
             </InputContainer>
             <InputContainer label={'BGM'}>
                 <div className={style.tip}>
-                    接口上传体积有限制，上传文件请全力压缩到80k以下
+                    接口上传体积有限制，上传文件请全力压缩到80k以下，推荐使用外链
                 </div>
                 <input
                     type={'file'}
@@ -432,7 +442,7 @@ const ConfigDialog: FC<{
             </InputContainer>
             <InputContainer label={'背景图'}>
                 <div className={style.tip}>
-                    接口上传体积有限制，上传文件请全力压缩到80k以下
+                    接口上传体积有限制，上传的图片将会被严重压缩，推荐使用外链
                 </div>
                 <input
                     type={'file'}
@@ -538,7 +548,7 @@ const ConfigDialog: FC<{
                     onChange={(e) => onNewSoundChange('name', e.target.value)}
                 />
                 <div className={style.tip}>
-                    接口上传体积有限制，上传文件请全力压缩到10k以下
+                    接口上传体积有限制，上传文件请全力压缩到10k以下，推荐使用外链
                 </div>
                 <input
                     type={'file'}
@@ -562,7 +572,7 @@ const ConfigDialog: FC<{
             </InputContainer>
             <InputContainer label={'图标素材'} required>
                 <div className={style.tip}>
-                    接口上传体积有限制，上传文件请全力压缩到5k以下，推荐尺寸56*56
+                    接口上传体积有限制，上传的图片将会被严重压缩，推荐使用外链
                 </div>
             </InputContainer>
             {customTheme.icons.map((icon, idx) => (
@@ -687,7 +697,7 @@ const ConfigDialog: FC<{
                 </div>
             )}
             <div className={style.tip}>
-                接口上传内容总体积有限制，上传文件失败请进一步压缩文件，或者使用外链（自行搜索【免费图床】【免费mp3外链】【对象存储服务】等关键词）。
+                接口上传内容总体积有限制，上传文件失败请尝试进一步压缩文件，推荐使用外链（自行搜索【免费图床】【免费mp3外链】【对象存储服务】等关键词）。
                 本地整活，勾选右侧关闭文件大小校验👉
                 <input
                     type={'checkbox'}

src/utils.ts

@@ -171,3 +171,104 @@ export const timestampToUsedTimeString: (time: number) => string = (time) => {
         return '时间转换出错';
     }
 };
+
+export const dataURLToFile: (dataURL: string, filename?: string) => File = (
+    // #endregion dataURLToFile
+    dataURL,
+    filename
+) => {
+    const isDataURL = dataURL.startsWith('data:');
+    if (!isDataURL) throw new Error('Data URL 错误');
+    const _fileName = filename || new Date().getTime().toString();
+    const mimeType = dataURL.match(/^data:([^;]+);/)?.[1] || '';
+    // base64转二进制
+    const binaryString = atob(dataURL.split(',')[1]);
+    let binaryStringLength = binaryString.length;
+    const bytes = new Uint8Array(binaryStringLength);
+    while (binaryStringLength--) {
+        bytes[binaryStringLength] = binaryString.charCodeAt(binaryStringLength);
+    }
+    return new File([bytes], _fileName, { type: mimeType });
+};
+
+interface drawImgSrcInCanvasParams {
+    imgSrc: string;
+    canvas: HTMLCanvasElement;
+    scale?: number;
+}
+export const drawImgSrcInCanvas: (
+    params: drawImgSrcInCanvasParams
+) => Promise<void> = async ({ imgSrc, canvas, scale = 1 }) => {
+    if (scale < 0) throw new Error('scale不能小于0');
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx || !(ctx instanceof CanvasRenderingContext2D)) {
+        throw new Error('Failed to get 2D context');
+    }
+    const img = document.createElement('img');
+    img.setAttribute('src', imgSrc);
+
+    return new Promise((resolve, reject) => {
+        img.onload = () => {
+            const width = img.width * scale;
+            const height = img.height * scale;
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            resolve();
+        };
+        img.onerror = () => {
+            reject(new Error('图片加载失败'));
+        };
+    });
+};
+
+interface createCanvasByImgSrcParams {
+    imgSrc: HTMLImageElement['src'];
+    scale?: number;
+}
+export const createCanvasByImgSrc: (
+    params: createCanvasByImgSrcParams
+) => Promise<HTMLCanvasElement> = async ({ imgSrc, scale = 1 }) => {
+    if (scale < 0) throw new Error('scale不能小于0');
+    const canvas = document.createElement('canvas');
+    await drawImgSrcInCanvas({
+        imgSrc,
+        canvas,
+        scale,
+    });
+    return canvas;
+};
+
+interface CanvasToFileParams {
+    canvas: HTMLCanvasElement;
+    fileName?: string;
+    maxFileSize?: number;
+}
+export const canvasToFile: (
+    params: CanvasToFileParams
+) => Promise<File> = async ({ canvas, fileName, maxFileSize }) => {
+    // #endregion canvasToFile
+    const MIME_TYPE = 'image/png';
+    const dataURL = canvas.toDataURL(MIME_TYPE);
+    const _fileName = fileName || new Date().getTime().toString();
+    const genFile = dataURLToFile(dataURL, _fileName);
+    // 判断是否需要压缩
+    if (maxFileSize && genFile.size > maxFileSize) {
+        let scale = Math.sqrt(maxFileSize / genFile.size);
+        if (scale > 0.9) scale = 0.9;
+        // TODO 暂时通过canvas绘制缩放图像进行递归压缩，后续考虑其他方式
+        // TODO 不断生成canvas, 调研内存是否会泄漏
+        const _canvas = await createCanvasByImgSrc({
+            imgSrc: dataURL,
+            scale,
+        });
+        return canvasToFile({
+            canvas: _canvas,
+            fileName: _fileName,
+            maxFileSize,
+        });
+    } else {
+        return genFile;
+    }
+};