Hôm nay chúng tôi sẽ chỉ cho bạn cách chuyển đổi phần tử HTML hoặc tài liệu thành hình ảnh trong React. Đôi khi bạn có thể cần tải xuống một hình ảnh của một phần tử vì vậy ở đây bạn sẽ tìm hiểu các bước dễ dàng để chuyển đổi tài liệu thành hình ảnh bằng gói NPM.
Ứng dụng Demo
Trong ví dụ này, chúng tôi sẽ chuyển đổi phần tử HTML cơ sở div
thành hình ảnh và tải xuống trên nút bấm.
Các bước để chuyển đổi phần tử HTML thành hình ảnh trong React
- Tạo ứng dụng React
- Cài đặt phụ thuộc NPM
- Thiết kế thành phần
- Sử dụng gói để chuyển đổi HTML thành hình ảnh
- Đầu ra
1. Tạo ứng dụng React
Hãy để tạo một ứng dụng React bằng cách sử dụng create-react-app
. Chạy lệnh sau để tạo ứng dụng React.
NPX created-react-app React-html-to-image-appcreate-react-app react-html-to-image-app |
2. Cài đặt phụ thuộc NPM
Ở đây, chúng tôi sẽ sử dụng gói NPM HTML-to-Image để chuyển đổi HTML thành hình ảnh. Chạy lệnh sau để cài đặt phụ thuộc.
3. Thành phần thiết kế
Bây giờ, hãy để chỉ đơn giản là thiết kế thành phần React như đã đề cập dưới đây.
App.js
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[
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hình ảnh tải xuốngDownload Image
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Convert HTML element ordocument into Image inReact & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Clue Mediator
];]; } Xuất DefaultApp;defaultApp; |
Hãy để thiết kế thành phần bằng cách sử dụng kiểu sau.
index.css
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; } |
Xuất DefaultApp;
Hãy để thiết kế thành phần bằng cách sử dụng kiểu sau.
#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 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[]; } |
Xuất DefaultApp;
- Hãy để thiết kế thành phần bằng cách sử dụng kiểu sau.
- #DOMEL {
4. Sử dụng gói để chuyển đổi HTML thành hình ảnh
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.
App.js
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 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[
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hình ảnh tải xuốngDownload Image
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Convert HTML element ordocument into Image in React & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Clue Mediator
];]; } Xuất DefaultApp;defaultApp; |
Hãy để thiết kế thành phần bằng cách sử dụng kiểu sau.
#DOMEL {
Thank you for reading. Happy Coding..!! 🙂
4. Sử dụng gói để chuyển đổi HTML thành hình ảnh
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.
nhập *ashtmltoimage từ'html-to-image ';
you can support us by buying me a coffee! ☕