Hướng dẫn convert html to image react js - chuyển đổi html sang hình ảnh phản ứng js

NPX created-react-app React-html-to-image-appcreate-react-app react-html-to-image-app

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

nhập phản ứng, {useref} từ'react ';React,{useRef}from'react';

Nhập mẫu từ './ Hình ảnh/Sample.png';sample from'./images/sample.png';

functionApp(){App(){

  constdomEl=useRef(null);const domEl=useRef(null);

  constdownloadImage=async()=>{constdownloadImage=async()=>{

  }}

  return(return(

    <div classname="App">

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hình ảnh tải xuống<button onclick="{downloadImage}">Download Image</button>

      <div id="domEl"ref="{domEl}">

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;<h3>Convert HTML element ordocument into Image inReact</h3>

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;<h3><a href="https://www.cluemediator.com/"target="_blank"rel="noopener">Clue Mediator</a></h3>

        <img src="{sample}" width="100">

      </div>

    </div>

  ););

}

Xuất DefaultApp;defaultApp;

body{{

  margin:20px;margin:20px;

}

Xuất DefaultApp;

  position:relative;position:relative;

  height:230px;height:230px;

  width:500px;width: 500px;

  padding:20px;padding:20px;

  background:#fff4f4;background:#fff4f4;

  border:1pxsolid#ddd;border:1pxsolid#ddd;

}

#DOMEL {ashtmlToImage from'html-to-image';

constdownloadImage=async()=>{downloadImage=async()=>{

4. Sử dụng gói để chuyển đổi HTML thành hình ảnhconstdataUrl= await htmlToImage.toPng(domEl.current);

Nhập gói html-to-image NPM trong thành phần App.js. Sử dụng phương thức .toPng() trong đó bạn phải vượt qua tham chiếu của phần tử DOM và lấy hình ảnh ở định dạng chuỗi Base64.// download image

  constlink=document.createElement('a');constlink=document.createElement('a');

  link.download="html-to-img.png";link.download ="html-to-img.png";

  link.href=dataUrl;link.href=dataUrl;

  link.click();link.click();

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

nhập phản ứng, {useref} từ'react ';React,{useRef}from'react';

Nhập mẫu từ './ Hình ảnh/Sample.png';sample from'./images/sample.png';

#DOMEL {ashtmlToImage from 'html-to-image';

functionApp(){App(){

  constdomEl=useRef(null);constdomEl=useRef(null);

  constdownloadImage=async()=>{constdownloadImage=async ()=>{

4. Sử dụng gói để chuyển đổi HTML thành hình ảnhconstdataUrl=await htmlToImage.toPng(domEl.current);

Nhập gói html-to-image NPM trong thành phần App.js. Sử dụng phương thức .toPng() trong đó bạn phải vượt qua tham chiếu của phần tử DOM và lấy hình ảnh ở định dạng chuỗi Base64.// download image

    constlink=document.createElement('a');const link=document.createElement('a');

    link.download="html-to-img.png";link.download="html-to-img.png";

    link.href=dataUrl;link.href=dataUrl;

    link.click();link.click();

  }}

  return(return(

    <div classname="App">

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hình ảnh tải xuống<button onclick="{downloadImage}">Download Image</button>

      <div id="domEl"ref="{domEl}">

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;<h3>Convert HTML element ordocument into Image in React</h3>

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;<h3><ahref="https://www.cluemediator.com/"target="_blank"rel="noopener">Clue Mediator</a></h3>

        <img src="{sample}"width="100">

      </div>

    </div>

  ););

}

Xuất DefaultApp;defaultApp;