根据指定区域内容生成图片并进行分享总结

需求及思路

1. 需要把特定的页面区域生成图片
2. 分享生成的图片

最终结论

1. 可以根据html2canvas来生成特定的图片
2. 普通浏览器中可以把生成的图片直接下载下来，最简单的就是通过a标签下载
3. 微信中不允许直接下载，只能进行长按进行保存的操作
4. 对保存的图片再进行转发分享

效果

这里只展示如何生成图片的，下载的就不做展示了

具体实现

本次尝试是在react项目中进行的，所以下面展示的代码直接是JSX的语法了

1. 安装html2canvas依赖

// yarn add html2canvas

2. 页面使用代码

import { Button, Image } from 'antd-mobile';
import styles from './index.less';
import { useCallback, useState } from 'react';
import ShareContainer from '@/components/ShareContainer';
// ShareContainer 是为了方便使用，创建的一个组件，大小依据外层容器的大小
// 生成的图片范围也为它的直接父级所覆盖的区域-本例中为蓝色线框的区域
export default function IndexPage() {
  const [create, setCreate] = useState<any>();
  const onClick = useCallback(() => {
    create();
  }, [create]);
  return (
    <div className={styles.layout}>
      <ShareContainer setCreate={(create) => setCreate(create)}>
        <div className={styles.content}>
          <div className={styles.top}></div>
          <div className={styles.btn}>
            <Button color="primary" block onClick={onClick}>
              click
            </Button>
          </div>
          <div className={styles.bottom}>
            <Image src='/123.png' />
          </div>
        </div>
      </ShareContainer>
    </div>
  );
}

样式文件

.layout {
  width: 90%;
  height: 90%;
  border: 1px solid blue;
}
.content {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 128px;
    background: url(/avatar.png);
    background-size: 64px 64px;
  }
  .btn {
    width: 100%;
    margin: 8px 0;
  }
  .bottom {
    width: 100%;
  }
}

3. ShareContainer组件代码

import { ImageViewer } from 'antd-mobile';
import styles from './index.less';
import html2canvas from 'html2canvas';
import { useCallback, useEffect, useRef, useState } from 'react';

interface Props {
  children: any;
  setCreate?: (create: any) => void;
}

export default function IndexPage({ children, setCreate }: Props) {
  const [url, setUrl] = useState('');
  const [visible, setVisible] = useState(false);
  const boxRef = useRef<any>();
  const onCreate = useCallback(() => {
    if (boxRef.current) {
      html2canvas(boxRef?.current, { scale: 1 }).then(function (canvas) {
        const aurl = canvas.toDataURL('image/png');
        canvas.getContext('2d')?.save();
        setUrl(aurl);
        setVisible(true);
      });
    }
  }, [url]);
  useEffect(() => {
    if (setCreate) {
      setCreate(() => onCreate);
    }
  }, [setCreate]);
  return (
    <div className={styles.box + ' share-container'} ref={boxRef}>
      <ImageViewer
        image={url}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        renderFooter={() => <div className={styles.tip}>长按保存图片</div>}
      />
      {children}
    </div>
  );
}
// 如果需要在普通浏览器中进行下载。这里可以把 长按保存图片 换成<a download href={url}></a>标签
// 这样可以直接利用a标签进行下载生成的图片

样式文件

.box {
  width: 100%;
  height: 100%;
}
.tip {
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 60px;
  color: #fff;
}