2021年11月22日09:02:53 react 抄写文字

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button, ActivityIndicator, TextareaItem } from 'antd-mobile';
import React, { useState, useEffect, FC } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import styles from './index.less';
import { noop } from 'lodash';
type WritePageType = {
  onClick?: (v: string) => void;
};
import { useBaseUpload } from '@/api/services/card';
import styled from 'styled-components';
import { FG } from './fn';
const Btn = styled(Button)`
  a:hover {
    color: #fff !important;
  }
`;
const WritePage: FC<WritePageType> = ({ onClick = noop }) => {
  const {
    upload: [loading, data, onBase],
  } = useBaseUpload();
  const [signImg, setSignImg] = useState('');
  const [urls, setUrls] = useState<any[]>([]);
  const [strIndex, setStrIndex] = useState(0);
  const [signTip, setSignTip] = useState(
    '本人已阅读保险条款、产品说明书和投保提示书，了解本产品的特点和保单利益的不确定性。',
  );
  let sigCanvas: any;
  const clearSign = () => {
    sigCanvas.clear();
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const dataURItoBlob = (base64Data: string) => {
    let byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(base64Data.split(',')[1]);
    else byteString = unescape(base64Data.split(',')[1]);
    const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    const ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: mimeString });
  };
  const base64ToFile = (urlData: any, fileName: string) => {
    const arr = urlData.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bytes = atob(arr[1]);
    let n = bytes.length;
    const ia = new Uint8Array(n);
    while (n--) {
      ia[n] = bytes.charCodeAt(n);
    }
    return new File([ia], fileName, { type: mime });
  };
  const handleSign = () => {
    // console.log(sigCanvas.toDataURL('image/png'));
    // const dataUrl = sigCanvas.toDataURL('image/png', 0.92);
    const base64Data = sigCanvas.toDataURL('image/png');
    const list = urls;
    list.push(base64Data);
    setUrls(list);
    clearSign();
    // return;
    //封装blob对象
    //canvas元素
    const c = document.getElementById('mycanvas');
    //context对象
    if (!c) return;
    const ctx = c.getContext('2d');
    ctx.beginPath();
    urls.forEach((element: string, index: number) => {
      const img = new Image();
      img.src = element;
      //图片加载完后，将其显示在canvas中
      img.onload = function () {
        ctx.drawImage(
          this,
          index < 6
            ? 50 * index
            : 50 * index - (Math.ceil((index + 1) / 6) - 1) * 300,
          50 * Math.ceil((index + 1) / 6),
          50,
          50,
        );
        // context.drawImage(this, 0, 0, 1080, 980)改变图片大小到1080*980
      };
    });
    setStrIndex(list.length);
    if (sigCanvas) {
      const canvas = sigCanvas.getCanvas();
      const context = canvas.getContext('2d');
      if (!context) return;
      context.font = 'normal 130pt "楷体"';
      context.fillStyle = '#ccc';
      context.fillText(signTip.charAt(list.length), 90, 150);
    }
    setSignImg(c.toDataURL('image/png'));
  };
  useEffect(() => {
    if (data) {
      onClick(signImg);
    }
  }, [data]);

  return (
    <>
      <ActivityIndicator
        toast
        animating={loading}
        size="large"
        text="上传中..."
      />

      <div className={styles.signContainer}>
        <div className={styles.signContent}>
          <SignatureCanvas
            penColor="#000"
            maxWidth={3}
            minWidth={1}
            canvasProps={{
              width: 350,
              height: 200,
              className: styles.canvasContainer,
            }}
            ref={(ref) => {
              sigCanvas = ref;
              if (ref) {
                const canvas = ref.getCanvas();
                const context = canvas.getContext('2d');
                if (!context) return;
                context.font = 'normal 130pt "楷体"';
                context.fillStyle = '#ccc';
                context.fillText(signTip.charAt(strIndex), 90, 150);
              }
            }}
            // onBegin={() => setSignTip('')}
          />
          {/* {signTip && <div className={styles.signTip}>{signTip}</div>} */}
        </div>
        <div className={styles.buttonContainer}>
          {/* <Btn onClick={clearSign} className={styles.clearBtn}>
            删除
          </Btn> */}
          {/* <Button
            loading={loading}
            onClick={handleSign}
            // className={styles.signBtn}
            type="primary"
          >
            签字确认
          </Button> */}

          {/* <Button
          loading={loading}
          className={styles.backBtn}
          onClick={backClick}
        >
          返回
        </Button> */}
        </div>
        <br />
        {urls.length !== signTip.length && (
          <Button
            loading={loading}
            onClick={handleSign}
            // className={styles.signBtn}
            type="primary"
          >
            签字确认
          </Button>
        )}
        <br />
        {urls.length === signTip.length && (
          <Button
            loading={loading}
            onClick={() => {
              console.log(signImg);

              onClick(signImg);
            }}
            // className={styles.signBtn}
            type="primary"
          >
            上传签名
          </Button>
        )}
        {/* {signImg && <img alt="" width={200} height={100} src={signImg} />} */}
      </div>
      <br />
      <div>
        <canvas id="mycanvas" width="300" height="500"></canvas>
      </div>
    </>
  );
};

export default WritePage;