web-base--/src/pages/Memory/components/UpdateForm.tsx

import React, {useEffect, useState} from 'react';
import {Button, message, Modal} from 'antd';
import MyQuill from '@/pages/Memory/components/MyQuill';
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;
  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) => {
  callBack(html);
  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);

  const [formValues, setFormValues] = useSingleState<TableListItem>({
    back: '',
    front: '',
    id: undefined,
    period: 0,
    remindTime: new Date(),
    tag: '',
    updateTime: '',
    userId: 0,
    ...props.values,
  });

  const {onCancel: hideModal, modalVisible} = props;

  const addHandle = async () => {
    /**
     * 判断
     */
    console.log(formValues);
    if (getTextFromHtml(formValues.front + formValues.back).length <= 1) {
      message.info('你是不是没有输入文字？');
      return;
    }
    if (formValues.front.length >= 300000 || formValues.back.length >= 300000) {
      message.info('文字太长了，减少一些吧！');
      return;
    }
    setBtnDisable(true); // 禁用按钮
    let res;
    if (formValues.id !== undefined) {
      res = await service.update(formValues);
    } else {
      res = await service.insert(formValues);
    }
    setBtnDisable(false); // 释放按钮
    if (res.success) {
      message.info('操作成功');
      if (formValues.id !== undefined) {
        hideModal(true);
      } else {
        setFormValues({front: '', back: ''});
      }
    } else {
      message.info(`操作失败: ${res.message}`);
    }
  };

  useEffect(() => {
    console.log(props);
    document.onkeydown = (ev) => {
      if (ev.ctrlKey && ev.key.toLowerCase() === 'enter') {
        addHandle();
      } else if (ev.key.toLowerCase() === 'escape') {
        hideModal(false);
      }
    };
  }, []);

  return (
    <Modal
      maskClosable={false}
      width={640}
      bodyStyle={{padding: '15px 15px 15px'}}
      destroyOnClose
      title="配置模型"
      visible={modalVisible}
      onCancel={() => hideModal(false)}
      footer={null}
    >
      <div>
        <h4>正面</h4>
        <MyQuill
          theme="snow"
          readonly={false}
          onChange={(value) => {
            dealHtml(value, (html: string) => {
              setFormValues({front: html});
            });
          }}
          value={formValues.front}
        />

        <p/>
        <h4>反面</h4>
        <MyQuill
          theme="snow"
          readonly={false}
          onChange={(value) => {
            dealHtml(value, (html: string) => {
              setFormValues({back: html});
            });
          }}
          value={formValues.back}
        />
        <p/>
        <Button type="primary" disabled={btnDisable} onClick={addHandle}>
          确定
        </Button>
        <span> </span>
        <Button
          type="primary"
          onClick={() => {
            hideModal(false);
          }}
        >
          关闭
        </Button>
      </div>
    </Modal>
  );
};

export default UpdateForm;