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

桐溪漂流

已于 2022-07-27 16:55:10 修改

阅读量916

点赞数

分类专栏：小知识点文章标签： javascript 前端

于 2022-07-27 16:48:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/126018224

版权

小知识点专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在React应用中使用html2canvas库来捕获页面的特定区域并生成图片，同时讨论了在浏览器和微信中的下载与分享策略。重点在于实践演示和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求及思路

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

最终结论

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

效果

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

具体实现

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

安装html2canvas依赖

// yarn add html2canvas

页面使用代码

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%;
  }
}

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;
}