Reacjs chuyển Html sang hình ảnh

Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

Nếu bạn muốn chụp ảnh màn hình một phần hoặc toàn bộ trang web của mình bằng JavaScript, bạn có thể gặp khó khăn. Tạo một hình ảnh từ một phần tử HTML có vẻ như là một thách thức, vì không có cách nào trực tiếp để làm điều đó trong JavaScript

Nội dung chính Show

Html-to-image hoạt động như thế nào?
Hãy cẩn thận và hạn chế
Sử dụng thư viện
Chụp ảnh màn hình bằng JavaScript thật dễ dàng

Rất may, đây không phải là một nhiệm vụ bất khả thi và trên thực tế, khá dễ dàng với các công cụ phù hợp. Sử dụng thư viện html-to-image, việc tạo hình ảnh của các nút DOM đơn giản như một lệnh gọi hàm duy nhất

Html-to-image hoạt động như thế nào?

Thư viện html-to-image tạo ra một hình ảnh ở dạng URL dữ liệu base64. Nó hỗ trợ một số định dạng đầu ra, bao gồm PNG, JPG và SVG. Để thực hiện chuyển đổi này, thư viện sử dụng thuật toán này

Tạo một bản sao của phần tử HTML đích, phần tử con của nó và bất kỳ phần tử giả nào được đính kèm
Sao chép kiểu dáng cho tất cả các phần tử được nhân bản và nhúng nội tuyến kiểu dáng
Nhúng các phông chữ web có liên quan, nếu có
Nhúng bất kỳ hình ảnh hiện có
Chuyển đổi nút nhân bản thành XML và sau đó là SVG
Sử dụng SVG để tạo URL dữ liệu

Hãy cẩn thận và hạn chế

Mặc dù html-to-image là một thư viện tuyệt vời nhưng nó không hoàn hảo. Nó có một vài cảnh báo, cụ thể là

Thư viện sẽ không hoạt động trong Internet Explorer hoặc Safari
Nếu HTML mà bạn cố gắng chuyển đổi bao gồm phần tử canvas bị nhiễm độc, thì thư viện sẽ không thành công. Như MDN giải thích, việc bao gồm dữ liệu không được CORS phê duyệt trong thành phần canvas của bạn sẽ làm hỏng nó
Vì các trình duyệt đặt giới hạn về kích thước tối đa của URL dữ liệu, nên có các giới hạn về kích thước của HTML mà thư viện có thể chuyển đổi

Sử dụng thư viện

Để dùng thử thư viện, điều đầu tiên bạn cần làm là tạo một thư mục dự án trên máy cục bộ của bạn. Tiếp theo, cài đặt html-to-image trong thư mục đó bằng trình quản lý gói npm. Đây là lệnh đầu cuối để cài đặt nó

npm install --save html-to-image

Bạn cũng nên cài đặt gói JavaScript để sử dụng thư viện dễ dàng hơn một chút. Gói esbuild có thể giúp đóng gói các mô-đun nút thành các tập lệnh tương thích với web

npm install esbuild

Đó là tất cả những gì bạn cần để cài đặt. Tiếp theo, tạo một tệp có tên là chỉ mục. html trong thư mục của bạn và cung cấp nó với máy chủ web bạn chọn. Đặt đoạn mã sau vào chỉ mục. html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.colorful-div {
padding: 3rem;
color: white;
background-image: linear-gradient(to right, yellow, rebeccapurple);
border: 1px solid black;
margin: 1rem auto;
font-size: 3rem;
font-family: cursive;
}
</style>
</head>
<body>

<div class="colorful-div">
I'm going to be in a screenshot!
</div>

<div class="long-text">
I'm an example of a sufficiently verbose paragraph that
illustrates that taking screenshots in JavaScript is
really very easy, for the following reasons:
<ul>
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 2</li>
</ul>
</div>

<script src="out.js"></script>
</body>
</html>

Mã này tạo hai phần tử trên trang. một div có nền chuyển màu, một số văn bản và một danh sách không có thứ tự bên trong một div khác. Tiếp theo, bạn sẽ viết JavaScript để chuyển đổi các thành phần này thành hình ảnh. Đặt đoạn mã sau vào một tệp mới có tên script. js

import * as htmlToImage from "html-to-image";

const elems = ['.colorful-div', '.long-text']

elems.forEach((elem, ind) => {
const node = document.querySelector(elem)

htmlToImage.toPng(node)
.then(function (dataUrl) {
let img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!');
console.log(error)
});
})

Mã này thực hiện một vài điều

Nhập thư viện html-to-hình ảnh
Tạo một mảng gồm các bộ chọn CSS nhắm mục tiêu hai phần tử
Tạo một hình ảnh PNG ở dạng URL dữ liệu từ mỗi phần tử của mảng
Tạo thẻ img và đặt thuộc tính src của nó thành URL dữ liệu, tạo bản sao hình ảnh của hai thành phần

Bây giờ hãy sử dụng esbuild để tạo tệp đi kèm (ra. js) chỉ mục đó. html tham chiếu bằng cách chạy phần sau trong thiết bị đầu cuối của bạn

./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

Tại thời điểm này, đây là chỉ số. html sẽ giống như trong trình duyệt của bạn

a demo page for html-to-image

Mặc dù các bản sao trông giống hệt như bản gốc, nhưng chúng thực sự là các yếu tố hình ảnh. Bạn có thể xác nhận điều này bằng cách mở công cụ phát triển của mình và kiểm tra chúng

Thư viện này cũng hoạt động với các khung JavaScript. Tài liệu html-to-image chứa các hướng dẫn về cách tạo các định dạng hình ảnh khác. Nó cũng bao gồm một ví dụ cho thấy cách sử dụng thư viện với React

Chụp ảnh màn hình bằng JavaScript thật dễ dàng

Không có phương thức JavaScript riêng để tạo hình ảnh từ các phần tử HTML hoặc chụp ảnh màn hình của DOM. Tuy nhiên, với sự trợ giúp của các thư viện và dịch vụ như html-to-image, nó trở thành một nhiệm vụ dễ dàng

Có nhiều cách khác để đạt được kết quả tương tự, chẳng hạn như thư viện wkhtmltoimage. Bạn có thể sử dụng công cụ nguồn mở này để chụp ảnh màn hình của một trang web hoàn chỉnh

programming html

Reacjs chuyển Html sang hình ảnh

Html-to-image hoạt động như thế nào?

Hãy cẩn thận và hạn chế

Sử dụng thư viện

Chụp ảnh màn hình bằng JavaScript thật dễ dàng

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội