图片压缩

README.md

@@ -1,59 +1,5 @@
 # Ant Design Pro
 
-更新模型列表，master 是否已修改
-
-This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use.
-
-## Environment Prepare
-
-Install `node_modules`:
-
-```bash
-npm install
-```
-
-or
-
-```bash
-yarn
+```text
+npm run pre
 ```
-
-## Provided Scripts
-
-Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
-
-Scripts provided in `package.json`. It's safe to modify or add additional script:
-
-### Start project
-
-```bash
-npm start
-```
-
-### Build project
-
-```bash
-npm run build
-```
-
-### Check code style
-
-```bash
-npm run lint
-```
-
-You can also use script to auto fix some lint error:
-
-```bash
-npm run lint:fix
-```
-
-### Test code
-
-```bash
-npm test
-```
-
-## More
-
-You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro).

src/pages/Memory/components/UpdateForm.tsx

@@ -1,21 +1,83 @@
 import React, {useEffect, useState} from 'react';
 import {Button, message, Modal} from 'antd';
-import {TableListItem} from '../../MemoryList/data.d';
 import Quill from "@/pages/Memory/components/Quill";
 import service from "@/pages/Memory/service";
 import {useSingleState} from "nice-hooks";
 import {getTextFromHtml} from "@/utils/utils";
+import {TableListItem} from '../../MemoryList/data.d';
 
 // 表单特殊字段
 export interface FormValueType extends Partial<TableListItem> {
 }
 
 export interface UpdateFormProps {
-  onCancel: (fresh?:boolean) => void;
+  onCancel: (fresh?: boolean) => void;
   modalVisible: boolean;
   values: Partial<TableListItem>;
 }
 
+const dealImage = (base64: string, targetWidth: number, targetSize: number, callback: Function) => {
+  const newImage = new Image();
+  let quality = 0.8;
+  newImage.src = base64;
+  // url为外域时需要
+  newImage.setAttribute("crossOrigin", 'Anonymous');
+  let imgWidth;
+  let imgHeight;
+  newImage.onload = function () {
+    imgWidth = newImage.width;
+    imgHeight = newImage.height;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (Math.max(imgWidth, imgHeight) > targetWidth) {
+      if (imgWidth > imgHeight) {
+        canvas.width = targetWidth;
+        canvas.height = targetWidth * imgHeight / imgWidth;
+      } else {
+        canvas.height = targetWidth;
+        canvas.width = targetWidth * imgWidth / imgHeight;
+      }
+    } else {
+      canvas.width = imgWidth;
+      canvas.height = imgHeight;
+    }
+    // @ts-ignore
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // @ts-ignore
+    ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
+    // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
+    while (base64.length / 1024 > targetSize) {
+      quality -= 0.01;
+      // eslint-disable-next-line no-param-reassign
+      base64 = canvas.toDataURL("image/jpeg", quality);
+    }
+    // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
+    // while (base64.length / 1024 < 50) {
+    // 	quality += 0.001;
+    // 	base64 = canvas.toDataURL("image/jpeg", quality);
+    // }
+    callback(base64);// 必须通过回调函数返回，否则无法及时拿到该值
+  }
+}
+
+/**
+ * 压缩html中的base64
+ */
+const dealHtml = (html: string,callBack:Function) => {
+  const htmlDoc = new DOMParser().parseFromString(html, "text/html");
+  const imgs = htmlDoc.querySelectorAll("img");
+  for (let i = 0; i < imgs.length; i += 1) {
+    const {src} = imgs[i];
+    if (src.startsWith("data")) {
+      dealImage(src, 500, 150, (base64: string) => {
+        imgs[i].src = base64;
+        callBack(htmlDoc.body.innerHTML)
+        console.log(`压缩图片${i}`)
+      })
+    }
+  }
+}
+
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
   const [btnDisable, setBtnDisable] = useState(false);
@@ -28,16 +90,18 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
     remindTime: new Date(),
     tag: "",
     updateTime: "",
-    userId: 0,...props.values});
+    userId: 0, ...props.values
+  });
+
 
   const {
     onCancel: hideModal,
     modalVisible,
   } = props;
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log(props);
-  },[])
+  }, [])
 
 
   return (
@@ -55,7 +119,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
         <Quill
           readonly={false}
           onChange={(value) => {
-            setFormValues({front: value});
+            dealHtml(value,(html:string)=>{
+              setFormValues({front: html});
+            })
           }}
           value={formValues.front}/>
 
@@ -64,7 +130,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
         <Quill
           readonly={false}
           onChange={(value) => {
-            setFormValues({back: value});
+            dealHtml(value,(html:string)=>{
+              setFormValues({back: html});
+            })
           }}
           value={formValues.back}
         />
@@ -73,6 +141,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
           type="primary"
           disabled={btnDisable}
           onClick={async () => {
+            /**
+             * 判断
+             */
             if (getTextFromHtml(formValues.front + formValues.back).length <= 1) {
               message.info("你是不是没有输入文字？");
               return;
@@ -94,7 +165,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
               if (formValues.id != undefined) {
                 hideModal(true);
               } else {
-                setFormValues({front:'',back:''})
+                setFormValues({front: '', back: ''})
               }
             } else {
               message.info(`操作失败: ${res.message}`);

src/pages/MemoryList/index.tsx

@@ -78,7 +78,7 @@ const TableList: React.FC<{}> = () => {
     {
       title: '间隔时间',
       dataIndex: 'period',
-      width: 200,
+      width: 100,
       hideInSearch: true,
       hideInForm: true,
       render: (text, row) => {
@@ -91,15 +91,26 @@ const TableList: React.FC<{}> = () => {
       title: '提醒时间',
       dataIndex: 'remindTime',
       valueType: 'dateTime',
-      width: 200,
+      width: 150,
       hideInSearch: true,
-      hideInForm: true
+      hideInForm: true,
+      sorter:true
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      valueType: 'dateTime',
+      width: 150,
+      hideInSearch: true,
+      hideInForm: true,
+      sorter:true
     },
     {
       title: '操作',
       dataIndex: 'option',
       width: 100,
       valueType: 'option',
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       render: (_, record, index, action) => (
         <>
           <a