🐛H5下载字符串显示问题

src/pages/H5Code/index.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+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";
@@ -12,6 +18,8 @@ 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";
@@ -19,6 +27,20 @@ function H5Code() {
     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
+    );
   }, []);
 
   // 获取地址栏参数
@@ -54,15 +76,19 @@ function H5Code() {
     window.setTimeout(() => {
       const canEle: HTMLDivElement = document.querySelector(".H5MainBoxInfo")!; //获取dom
       let a = document.createElement("a");
-      html2canvas(canEle).then((canvas) => {
+      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/png"));
+        let blob: any = dataURLToBlob(dom.toDataURL("image/jpeg"));
         a.setAttribute("href", URL.createObjectURL(blob));
         //这块是保存图片操作  可以设置保存的图片的信息
-        a.setAttribute("download", info.name + ".png");
+        a.setAttribute("download", info.name + ".jpg");
         document.body.appendChild(a);
         a.click();
         URL.revokeObjectURL(blob);
@@ -74,12 +100,34 @@ function H5Code() {
 
   const infoTxt = useMemo(() => {
     let txt = info.description ? info.description : "-";
-    if (txt.length >= 60 && donImg) txt = txt.substring(0, 60) + "...";
+
+    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}>
+    <div className={styles.H5Code} id="H5Code">
       <div className="H5MainBox">
         <div className="H5MainBoxInfo">
           <div className="H5Img">

src/pages/Wall/WallTable/index.tsx

@@ -97,13 +97,13 @@ function WallTable() {
           if (item.type === "img")
             return (
               <div className="tableImgAuto">
-                <ImageLazy width={80} height={80} src={item.filePath} />
+                <ImageLazy width={60} height={60} src={item.filePath} />
               </div>
             );
           else
             return (
               <div className="tableImgAuto">
-                <VideoLook width={80} height={80} src={item.filePath} />
+                <VideoLook width={60} height={60} src={item.filePath} />
               </div>
             );
         },