Chuyển đổi HTML thành hình ảnh

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

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

1. 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
2. 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
3. Nhúng các phông chữ web có liên quan, nếu có
4. Nhúng bất kỳ hình ảnh hiện có
5. Chuyển đổi nút nhân bản thành XML và sau đó là SVG
6. 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

 


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




    I'm going to be in a screenshot!



    I'm an example of a sufficiently verbose paragraph that
    illustrates that taking screenshots in JavaScript is
    really very easy, for the following reasons:
    
        Reason 1
        Reason 2
        Reason 2
    

 


 

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

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

Làm cách nào để chuyển đổi HTML thành hình ảnh trong Javascript?

HTML có thể sang PNG không?

Làm cách nào để chuyển đổi HTML thành hình ảnh trong C#?

Làm cách nào để chuyển đổi HTML thành hình ảnh trong PHP?