Generate pictures based on the content of the specified area and share them with a summary

Needs and ideas

1. You need to generate a picture for a specific page area
2. Share the generated image

Final conclusion

1. You can generate specific images according to html2canvas
2. The generated image can be downloaded directly in a normal browser. The easiest way is to download it through the a tag
3. Direct download is not allowed in WeChat, only long press to save
4. Forward and share the saved picture

Effects

Here only shows how to generate pictures, and downloads will not be shown

Concrete implementation

This attempt is made in the react project, so the code shown below is directly the syntax of JSX

1. Install html2canvasdependencies

// yarn add html2canvas

2. Page usage code

import { Button, Image } from 'antd-mobile';import styles from './index.less';import { useCallback, useState } from 'react';import ShareContainer from '@/components/ShareContainer';// ShareContainer is a component created for convenience, the size is based on the size of the outer container// The resulting image extent is also the area covered by its immediate parent - in this case the area of ​​the blue wireframeexport default function IndexPage() {const [create, setCreate] = useState();const onClick = useCallback(() => {create();}, [create]);return (
 setCreate(create)}>
click
);}

style file

.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. ShareContainerComponent code

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();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 (
 {setVisible(false);}}renderFooter={() => 
Long press to save image
}/>{children}
);}// If you need to download in a normal browser.Here you can change the long press to save the image to the  tag// This can directly use the a tag to download the generated image

style file

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