XZWALL/src/pages/H5Code/index.tsx

import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import H5Logo from "@/assets/img/H5Logo.png";
import { useLocation } from "react-router";
import { urlParameter } from "@/utils/history";
import { useDispatch, useSelector } from "react-redux";
import { getH5InfoAPI } from "@/store/action/h5code";
import { RootState } from "@/store";
import { baseURL } from "@/utils/http";
import classNames from "classnames";
import html2canvas from "html2canvas";
import { Spin } from "antd";

function H5Code() {
  const timeRef = useRef(-1);

  useEffect(() => {
    const root: any = document.querySelector("#root");
    root.style.overflow = "hidden";
    root.style.overflow = "hidden";
    root.style.minHeight = "100vh";
    root.style.minWidth = "100vw";
    document.title = "徐州汉画像石艺术馆";
    const dom: any = document.querySelector("#H5Code");
    dom.style.height = window.innerHeight + "px";
    window.addEventListener(
      "resize",
      () => {
        if (dom) {
          clearTimeout(timeRef.current);
          timeRef.current = window.setTimeout(() => {
            dom.style.height = window.innerHeight + "px";
          }, 500);
        }
      },
      true
    );
  }, []);

  // 获取地址栏参数
  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    const obj = urlParameter(location.search);
    if (obj.id) dispatch(getH5InfoAPI(obj.id));
  }, [dispatch, location.search]);

  // 从仓库获取详情
  const info = useSelector((state: RootState) => state.h5codeReducer.h5info);

  // 点击下载海报
  const [donImg, setDonImg] = useState(false);

  const dataURLToBlob = useCallback((dataurl: any) => {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }, []);

  const donImgFu = useCallback(() => {
    setDonImg(true);

    window.setTimeout(() => {
      const canEle: HTMLDivElement = document.querySelector(".H5MainBoxInfo")!; //获取dom
      let a = document.createElement("a");
      html2canvas(canEle, {
        backgroundColor: "transparent",
        allowTaint: true,
        useCORS: true,
      }).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob: any = dataURLToBlob(dom.toDataURL("image/jpeg"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute("download", info.name + ".jpg");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
        setDonImg(false);
      });
    }, 100);
  }, [dataURLToBlob, info.name]);

  const infoTxt = useMemo(() => {
    let txt = info.description ? info.description : "-";

    const dom = document.querySelector(".txtMain>div");
    if (dom) {
      // 获取简介盒子的宽高，判断能装多少字符
      const width = dom.clientWidth;
      const height = dom.clientHeight;

      // 计算最多多少列
      const maxH = Math.floor(height / 20);
      // 一个字的面积
      // const oneZ = 18 * 20;

      // 盒子宽度下一行最多显示多少字
      const maxW = Math.floor(width / 16);

      // 这个盒子最多装多少字
      const maxString = maxH * maxW;

      // console.log("------", maxString);
      if (txt.length >= maxString && donImg)
        txt = txt.substring(0, maxString) + "...";
    }

    return txt;
  }, [donImg, info.description]);

  return (
    <div className={styles.H5Code} id="H5Code">
      <div className="H5MainBox">
        <div className="H5MainBoxInfo">
          <div className="H5Img">
            {info.thumb ? <img src={baseURL + info.thumb} alt="" /> : null}
          </div>
          {/* 占位盒子 */}
          <div className="H5Loc"></div>
          {/* 文字信息 */}
          <div className="H5TxtBox">
            {/* 名字 */}
            <div className="name">
              <div>{info.name}</div>
            </div>
            {/* 简介信息 */}
            <div className="txtMain">
              <p>类别：{info.dictTexture}</p>
              <p>年代：{info.dictAge}</p>
              <p>级别：{info.dictLevel}</p>
              <div>简介：{infoTxt}</div>
            </div>
          </div>
          {/* logo */}
          <div className="H5Logo">
            <img src={H5Logo} alt="" />
          </div>
        </div>
        <div className="H5MainBoxButton">
          <div onClick={donImgFu}>下载海报</div>
        </div>
      </div>

      {/* 加载中的背景 */}
      <div
        className={classNames(
          "H5lodingBacBox",
          donImg ? "H5lodingBacBoxShow" : ""
        )}
      >
        <Spin size="large" />
      </div>
    </div>
  );
}

const MemoH5Code = React.memo(H5Code);

export default MemoH5Code;