Hướng dẫn how do i add html2canvas? - làm cách nào để thêm html2canvas?

Question

html2canvas

Cài đặt

Bạn có thể cài đặt html2canvas thông qua NPM hoặc tải xuống bản phát hành được xây dựng.

Nội dung chính Show

html2canvas
Cài đặt
Cách sử dụng
HTML2Canvas
Làm thế nào nó hoạt động?
Tính tương thích của trình duyệt web
Cách sử dụng
Đóng góp

NPM

npm install html2canvas

import html2canvas from 'html2canvas';

Cách sử dụng

Để hiển thị

import html2canvas from 'html2canvas';

0 với HTML2Canvas với một số tùy chọn (tùy chọn), chỉ cần gọi

import html2canvas from 'html2canvas';

1

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Trang web này là nguồn mở. Cải thiện trang này.

Ảnh chụp màn hình với JavaScript

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

JavaScript

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

Hãy thử nó vượt trội

Cài đặt NPM

import html2canvas from 'html2canvas';

2

Lắp đặt sợi

import html2canvas from 'html2canvas';

3

html2canvas.jshtml2canvas.min.js

45kb gzipped

Liên kết

Theo dõi @niklasvh

HTML2Canvas

Trang chủ | Tải xuống | Câu hỏi

Kết xuất JavaScript HTML

Kịch bản cho phép bạn chụp "ảnh chụp màn hình" các trang web hoặc các phần của nó, trực tiếp trên trình duyệt người dùng. Ảnh chụp màn hình dựa trên DOM và do đó có thể không chính xác 100% cho biểu diễn thực vì nó không tạo ảnh chụp màn hình thực tế, nhưng xây dựng ảnh chụp màn hình dựa trên thông tin có sẵn trên trang.

Làm thế nào nó hoạt động?

Kịch bản hiển thị trang hiện tại dưới dạng hình ảnh canvas, bằng cách đọc DOM và các kiểu khác nhau được áp dụng cho các yếu tố.

Nó không yêu cầu bất kỳ kết xuất nào từ máy chủ, vì toàn bộ hình ảnh được tạo trên trình duyệt của máy khách. Tuy nhiên, vì nó phụ thuộc rất nhiều vào trình duyệt, thư viện này không phù hợp để được sử dụng trong nodejs. Nó cũng không phá vỡ bất kỳ hạn chế chính sách nội dung nào, vì vậy, kết xuất nội dung có nguồn gốc chéo sẽ yêu cầu proxy để đưa nội dung đến cùng một nguồn gốc.not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.

Kịch bản vẫn ở trạng thái rất thử nghiệm, vì vậy tôi không khuyên bạn nên sử dụng nó trong môi trường sản xuất cũng như không bắt đầu xây dựng các ứng dụng với nó, vì vẫn sẽ có những thay đổi lớn được thực hiện.very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

Tính tương thích của trình duyệt web

Thư viện sẽ hoạt động tốt trên các trình duyệt sau (với polyfill

import html2canvas from 'html2canvas';

4):

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

Vì mỗi thuộc tính CSS cần được xây dựng thủ công để được hỗ trợ, có một số thuộc tính chưa được hỗ trợ.

Cách sử dụng

Thư viện HTML2Canvas sử dụng

import html2canvas from 'html2canvas';

4 và hy vọng chúng sẽ có sẵn trong bối cảnh toàn cầu. Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn không hỗ trợ

import html2canvas from 'html2canvas';

4, vui lòng bao gồm một polyfill như ES6-Promise trước khi bao gồm html2canvas.

Để hiển thị

import html2canvas from 'html2canvas';

0 với HTML2Canvas, chỉ cần gọi:

import html2canvas from 'html2canvas';

9

Hàm trả về một lời hứa chứa phần tử

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

0. Chỉ cần thêm một người xử lý thực hiện lời hứa vào lời hứa bằng cách sử dụng

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

1:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Tòa nhà

Bạn có thể tải xuống các bản dựng sẵn sàng ở đây.

Kho lưu trữ Clone Git:

$ git clone git://github.com/niklasvh/html2canvas.git

Cài đặt phụ thuộc:

$ npm install

Xây dựng gói trình duyệt

$ npm run build

Ví dụ

Để biết thêm thông tin và ví dụ, vui lòng truy cập trang chủ hoặc thử bảng điều khiển thử nghiệm.

Đóng góp

Nếu bạn muốn đóng góp cho dự án, xin vui lòng gửi các yêu cầu kéo đến chi nhánh phát triển. Trước khi gửi bất kỳ thay đổi nào, hãy thử và kiểm tra xem các thay đổi có hoạt động với tất cả các trình duyệt hỗ trợ. Nếu một số thuộc tính CSS không được hỗ trợ hoặc không đầy đủ, vui lòng tạo các thử nghiệm phù hợp cho nó trước khi gửi bất kỳ thay đổi mã nào.