Cách chuyển html sang js

Question

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
Chúng tôi có thể chuyển đổi HTML sang JavaScript không?
Làm cách nào để chuyển đổi HTML thành chuỗi JS?
Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong JavaScript?
Làm cách nào để chuyển đổi HTML sang React JS?

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

 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>Documenttitle>
    <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 1li>
        <li>Reason 2li>
        <li>Reason 2li>
    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

Chúng tôi có thể chuyển đổi HTML sang JavaScript không?

Chèn văn bản HTML của bạn vào hộp văn bản bằng cách nhập hoặc cắt và dán. Sau đó, để chuyển đổi nó thành JavaScript có thể sử dụng được trong tài liệu HTML, hãy nhấp vào nút 'Chuyển đổi HTML -> JavaScript' ; . Nút 'Xóa văn bản' sẽ xóa mọi thứ trong hộp văn bản.

Làm cách nào để chuyển đổi HTML thành chuỗi JS?

replace(/ Phương pháp này là một cách đơn giản và hiệu quả để xóa thẻ khỏi văn bản. Phương thức này sử dụng phương thức chuỗi. replace(old value,new value) thay thế các giá trị thẻ HTML bằng chuỗi rỗng.

Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong JavaScript?

Cách dễ nhất là loại bỏ tất cả các thẻ HTML bằng cách sử dụng phương thức thay thế () của JavaScript. Nó tìm thấy tất cả các thẻ được đặt trong dấu ngoặc nhọn và thay thế chúng bằng khoảng trắng. văn bản var = html

Làm cách nào để chuyển đổi HTML sang React JS?

Các bước chuyển đổi trang web HTML sang React JS .

Bước 1. Biến các trang thành các thành phần. Khi chuyển website HTML sang React JS, bạn cần biến trang web thành component. .

Bước 2. Sửa lỗi cú pháp. .

Bước 3. Thêm CSS. .

Bước 4. phụ thuộc. .

Bước 5. Phân hủy trang

programming html

Cách chuyển html sang js

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

Chúng tôi có thể chuyển đổi HTML sang JavaScript không?

Làm cách nào để chuyển đổi HTML thành chuỗi JS?

Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong JavaScript?

Làm cách nào để chuyển đổi HTML sang React JS?

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