一周时间，开发了一款封面图生成器工具

// 页面主函数
export function Main(props) {
  // ...
}
// 内容配置函数
export function ContentForm(props) {
  // ...
}
// 样式配置函数
export function ConfigForm(props) {
  // ...
}
// 封面图预览函数
export function CoverImage(props) {
  // ...
}

export function Main({ normal }) {
  const coverRef = useRef();
  
  const [config, setConfig] = useState({
    font: 'serif',
    bgColor: '#949ee5',
    gradientBgColor: '',
    icon: 'react',
    ratio: 0.5,
    width: 800,
    title: '欢迎来到太空编程站点',
    author: '编程范儿',
    theme: 'basic',
    bgImg: 'https://spacexcode.oss-cn-hangzhou.aliyuncs.com/1704985651753-e2a2eb6d-71c6-4293-8d8c-49203c7410bb.jpeg'
  });
 
  const handleConfigChange = (val, key) => {
    setConfig((prev) => ({ ...prev, [key]: val }));
  };
  const downloadImage = (scale, format) => {
    // todo
  };
  const handleCopyImg = (cb) => {
    //todo
  };

  return (
    <Box sx={{ padding: '40px 0' }}>
      <Grid container spacing={3}>
        <Grid item xs={12} md={ normal ? 8 : 12 }>
          <Box className={styles.card} sx={{ padding: '20px 10px', overflowX: 'auto' }}>
            {/* 生成图显示 */}
            <div ref={coverRef} className={styles.preview} style={{ width: config.width + 'px'}}>
              <CoverImage config={config} />
            </div>
          </Box>
          <Box className={styles.card} sx={{ padding: '10px 20px 40px', marginTop: '24px' }}>
            <ContentForm config={config} handleConfigChange={handleConfigChange} />
          </Box>
        </Grid>
          {/* 配置 */}
        <Grid item xs={12} md={normal ? 4 : 6}>
          <Box className={styles.card} sx={{ padding: '10px 20px 40px' }}>
            <ConfigForm config={config} handleConfigChange={handleConfigChange} downloadImage={downloadImage} handleCopyImg={handleCopyImg} />
          </Box>
        </Grid>
      </Grid>
    </Box>
  )
}

export function ContentForm ({ config, handleConfigChange }) {
  return (
    <>
      <Box className={styles.setItem}>
        <Typography variant="h5">标题</Typography>
        <TextField
          value={config.title}
          onChange={e => handleConfigChange(e.target.value, 'title')}
          placeholder='标题'
          size='small'
          multiline
          rows={3}
          fullWidth
        />
      </Box>
      <Box className={styles.setItem}>
        <Typography variant="h5">作者</Typography>
        <TextField
          value={config.author}
          onChange={e => handleConfigChange(e.target.value, 'author')}
          placeholder='作者'
          size='small'
          fullWidth
        />
      </Box>
      <Box className={styles.setItem}>
        <Typography variant="h5">图标</Typography>
        <Box sx={{ display: 'flex', gap: '10px' }}>
          <Select
            value={config.icon}
            onChange={val => handleConfigChange(val.target.value, 'icon')}
            label=''
            size='small'
            fullWidth
          >
            {devicons.map(el => (
              <MenuItem value={el.value} key={el.value}>
                <div className={styles.selectIconRow}><span>{el.label}</span>{selectDevicon(el.value)}</div></MenuItem>
            ))}
          </Select>
          <Button component="label" size='small' variant="contained" sx={{ width: '120px' }} startIcon={<AddPhotoAlternateIcon />}>
            上传<VisuallyHiddenInput type="file" onChange={(e) => handleConfigChange(URL.createObjectURL(e.target.files[0]), 'customIcon')} />
          </Button>
        </Box>
      </Box>
    </>
  )
}

import { Skeleton } from '@mui/material';

export default const BasicTheme = () => {
  return (
    <div className={styles.basicTheme}>
      <Skeleton animation={false} variant="rectangular" sx={{ padding: '8px' }} width={116} height={68}>
        <div className={styles.content}>
          <Skeleton animation={false} variant="text" width={'100%'} height={10} />
          <Skeleton animation={false} variant="text" width={'70%'} height={10} />
          <div className={styles.bt}>
            <Skeleton animation={false} variant="rounded" width={10} height={10} />
            <Skeleton animation={false} variant="text" width={'20%'} height={8} />
          </div>
        </div>
      </Skeleton>
    </div>
  );
}

export default const BasicTheme = ({ config }) => {
  const { title, bgColor, gradientBgColor, author, icon, font, customIcon, width, ratio } = config;
  const height = width * ratio + 'px';
  return (
    <div className={styles.basicTheme}>
      <div className={styles.main} style={{ backgroundColor: bgColor, backgroundImage: gradientBgColor, height: height }}>
        <div className={clsx(styles.content, styles['font-' + font])}>
          <div style={{ padding: '0 3rem' }}>
            <h1>{title}</h1>
          </div>
          <div className={styles.bt}>
            {
              customIcon ?
                <div className={styles.customIcon}>
                  <img src={customIcon} alt="img" />
                </div>
                :
                <div className={styles.devicon}>
                  {selectDevicon(icon)}
                </div>
            }
            <h2 className={styles.author}>{author}</h2>
          </div>
        </div>
      </div>
    </div>
  );
}

const selectTheme = (theme) => {
  switch (theme) {
    case 'basic':
      return <BasicTheme config={config} />;
    case 'modern':
      return <ModernTheme config={config} />;
    case 'outline':
      return <OutlineTheme config={config} />;
    case 'background':
      return <BackgroundTheme config={config} />;
    case 'preview':
      return <PreviewTheme config={config} />;
    case 'stylish':
      return <StylishTheme config={config} />;
    case 'mobile':
      return <MobileTheme config={config} />;
    default:
      return <BasicTheme config={config} />;
  }
};

const handleCopyImg = (cb) => {
  if (!coverRef.current) return;
  html2canvas(coverRef.current, {
    useCORS: true,
    scale: 1,
    backgroundColor: 'transparent'
  }).then((canvas) => {
    canvas.toBlob(async blob => {
      console.log(blob);
      const data = [
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ];
      await navigator.clipboard.write(data)
        .then(
          () => {
            console.log("复制成功!");
            cb && cb();
          },
          () => {
            console.error("失败.");
          }
        );
    });
  })
};

const downloadImage = (scale, format) => {
  if (!coverRef.current) return;
  html2canvas(coverRef.current, {
    useCORS: true,
    scale: scale,
    backgroundColor: 'transparent'
  }).then((canvas) => {
    let newImg = new Image()
    const date = new Date()
    newImg.src = canvas.toDataURL('image/' + format) // 'image/png'
    const a = document.createElement("a");
    a.style.display = "none";
    a.href = newImg.src;
    a.download = `spacexcode-cover-${date.getMinutes()}${date.getSeconds()}.${format}`;
    a.rel = "noopener noreferrer";
    document.body.append(a);
    a.click();
    setTimeout(() => {
        a.remove();
    }, 1000);
  })
};