Hướng dẫn html2image - html2image

HTML2Image

HTML2Image là gói Python nhẹ, hoạt động như một trình bao bọc xung quanh chế độ không đầu của trình duyệt web hiện có để tạo hình ảnh từ URL và từ các chuỗi hoặc tệp HTML+CSS.

Gói này đã được thử nghiệm trên Windows, Ubuntu (máy tính để bàn và máy chủ) và macOS. Nó hiện đang trong một công việc trong giai đoạn tiến bộ. Nếu bạn gặp bất kỳ vấn đề hoặc khó khăn nào trong khi sử dụng nó, hãy thoải mái mở một vấn đề trên trang GitHub của dự án này. Phản hồi cũng được chào đón!

Nguyên tắc

Hầu hết các trình duyệt web đều có chế độ không đầu, đó là một cách để chạy chúng mà không hiển thị bất kỳ giao diện đồ họa nào. Chế độ không đầu chủ yếu được sử dụng cho các thử nghiệm tự động nhưng cũng có ích nếu bạn muốn chụp ảnh màn hình các trang web là bản sao chính xác của những gì bạn sẽ thấy trên màn hình nếu bạn đang sử dụng trình duyệt.

Tuy nhiên, vì mục đích chụp ảnh màn hình, chế độ không đầu không thuận tiện để sử dụng. HTML2Image nhằm mục đích ẩn các bất tiện của các chế độ không đầu của trình duyệt trong khi thêm các tính năng hữu ích như cho phép tạo hình ảnh từ ít như một chuỗi.

Để biết thêm thông tin về các chế độ không đầu:

• (Chrome) https://developers.google.com/web/updates/2017/04/headless
• (Firefox) https://developer.mozilla.org/en-us/docs/mozilla/firefox/headless_mode

Cài đặt

HTML2Image được xuất bản trên PYPI và có thể được cài đặt thông qua PIP:

pip install --upgrade html2image

Ngoài gói này, ít nhất một trong các trình duyệt sau phải được cài đặt trên máy của bạn:must be installed on your machine :

• Google Chrome (Windows, MacOS)
• Máy thổi crom (Linux)

Cách sử dụng

Đầu tiên, nhập gói và khởi tạo nó

from html2image import Html2Image
hti = Html2Image()

• from html2image import Html2Image
  hti = Html2Image()

  9: Trình duyệt sẽ được sử dụng, được đặt theo mặc định thành

  hti = Html2Image(size=(500, 200))

  0 (trình duyệt duy nhất được hỗ trợ bởi HTML2Image tại thời điểm này)

• hti = Html2Image(size=(500, 200))

  1: Đường dẫn hoặc lệnh có thể được sử dụng để tìm tệp thực thi của một trình duyệt cụ thể.

• hti = Html2Image(size=(500, 200))

  2: Đường dẫn đến thư mục được chụp ảnh chụp màn hình sẽ được xuất ra. Mặc định là thư mục làm việc hiện tại của chương trình Python của bạn.

• hti = Html2Image(size=(500, 200))

  3: 2-TULE Tái tạo kích thước của các ảnh chụp màn hình sẽ được thực hiện. Giá trị mặc định là

  hti = Html2Image(size=(500, 200))

  4.

• hti = Html2Image(size=(500, 200))

  5: Đường dẫn sẽ được sử dụng để kết hợp các tài nguyên khác nhau khi chụp màn hình các chuỗi tệp. Giá trị mặc định là

  hti = Html2Image(size=(500, 200))

  6 trên Windows và

  hti = Html2Image(size=(500, 200))

  7 trên Linux và MacOS.

Example:

hti = Html2Image(size=(500, 200))

Bạn cũng có thể thay đổi các giá trị này sau:

Sau đó chụp ảnh màn hình

Phương pháp

hti = Html2Image(size=(500, 200))

• URL thông qua tham số

  hti = Html2Image(size=(500, 200))

  9;
• Các tệp HTML và CSS thông qua các tham số

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  0 và

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  1;files via the

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  0 and

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  1 parameters;
• Chuỗi HTML và CSS thông qua các tham số

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  2 và

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  3;strings via the

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  2 and

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  3 parameters;
• và các loại tệp "khác" thông qua tham số

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  4 (hãy thử với các tệp .svg!).

Và bạn cũng có thể (tùy chọn):

• Thay đổi kích thước của ảnh chụp màn hình bằng tham số

  hti = Html2Image(size=(500, 200))

  3;
• Lưu ảnh chụp màn hình dưới dạng tên cụ thể bằng tham số

  hti.screenshot(url='https://www.python.org', save_as='python_org.png')

  6.

N.B. : Phương pháp

hti = Html2Image(size=(500, 200))

Một vài ví dụ

• URL để hình ảnh

hti.screenshot(url='https://www.python.org', save_as='python_org.png')

• Chuỗi HTML & CSS thành hình ảnh

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

• Tệp HTML & CSS để hình ảnh

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

• Các tệp khác để hình ảnh

hti.screenshot(other_file='star.svg')

• Thay đổi kích thước của ảnh chụp màn hình

hti.screenshot(other_file='star.svg', size=(500, 500))

• Change the directory to which the screenshots are saved

hti = Html2Image(output_path='my_screenshot_folder')

HOẶC

hti.output_path = 'my_screenshot_folder'

N.B. : Đường dẫn đầu ra sẽ được thay đổi cho tất cả các ảnh chụp màn hình trong tương lai.

Sử dụng danh sách thay cho bất kỳ tham số nào trong khi sử dụng phương thức

hti = Html2Image(size=(500, 200))

8

• Ảnh chụp màn hình nhiều đối tượng chỉ sử dụng một tên tệp hoặc một tên tệp cho mỗi tệp:

from html2image import Html2Image
hti = Html2Image()

• Chụp nhiều ảnh chụp màn hình có cùng kích thước

from html2image import Html2Image
hti = Html2Image()

• Chụp nhiều ảnh chụp màn hình với các kích thước khác nhau

from html2image import Html2Image
hti = Html2Image()

• Áp dụng (các) chuỗi CSS cho nhiều chuỗi HTML

from html2image import Html2Image
hti = Html2Image()

• Lấy đường dẫn của (các) tệp được tạo, phương thức

  hti = Html2Image(size=(500, 200))

  8 trả về danh sách chứa (các) đường dẫn của ảnh chụp màn hình (các) ảnh chụp màn hình:
  The

  hti = Html2Image(size=(500, 200))

  8 method returns a list containing the path(s) of the screenshot(s):

from html2image import Html2Image
hti = Html2Image()

Thay đổi cờ trình duyệt

Trong một số trường hợp, bạn có thể cần thay đổi các cờ được sử dụng để chạy chế độ không đầu của trình duyệt.

Cờ có thể được sử dụng để:

• Thay đổi màu nền mặc định của các trang;
• Ẩn thanh cuộn;
• Thêm độ trễ trước khi chụp ảnh màn hình;
• Cho phép bạn sử dụng HTML2Image khi bạn gốc, vì bạn sẽ phải chỉ định cờ

  html = """
   An interesting title 
   This page will be red"""
  css = "body {background: red;}"
  
  hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

  0;

Bạn có thể tìm thấy danh sách đầy đủ các cờ Chrome / Chromium ở đây.

Có hai cách để chỉ định cờ tùy chỉnh:

from html2image import Html2Image
hti = Html2Image()

• Cờ ví dụ sử dụng trường hợp: thêm độ trễ trước khi chụp ảnh màn hình

Với Chrome / Chromium, các ảnh chụp màn hình được bắn trực tiếp sau khi không còn "Fetch Network đang chờ đợi", nhưng đôi khi bạn có thể muốn thêm độ trễ trước khi chụp ảnh màn hình, để chờ hình ảnh động kết thúc chẳng hạn. Có một lá cờ cho mục đích này,

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

from html2image import Html2Image
hti = Html2Image()

• Cờ mặc định

Để dễ sử dụng, một số cờ được đặt theo mặc định. Tuy nhiên, các cờ mặc định không được sử dụng nếu bạn quyết định chỉ định

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

from html2image import Html2Image
hti = Html2Image()

Sử dụng CLI

HTML2Image đi kèm với giao diện dòng lệnh mà bạn có thể sử dụng để tạo ảnh chụp màn hình từ các tệp và URL khi đang di chuyển.

CLI là một công việc đang tiến triển và có thể phải chịu sự thay đổi. Bạn có thể gọi nó bằng cách nhập

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

hti.screenshot(
    html_file='blue_page.html', css_file='blue_background.css',
    save_as='blue_page.png'
)

... Bây giờ trong một container docker!

Bạn cũng có thể kiểm tra gói và CLI mà không cần phải cài đặt mọi thứ trên máy cục bộ của bạn, thông qua container Docker.

• Đầu tiên

  hti.screenshot(
      html_file='blue_page.html', css_file='blue_background.css',
      save_as='blue_page.png'
  )

  6 repo này

• hti.screenshot(
      html_file='blue_page.html', css_file='blue_background.css',
      save_as='blue_page.png'
  )

  7 bên trong nó
• Xây dựng hình ảnh:

  hti.screenshot(
      html_file='blue_page.html', css_file='blue_background.css',
      save_as='blue_page.png'
  )

  8
• Chạy và vào bên trong container:

  hti.screenshot(
      html_file='blue_page.html', css_file='blue_background.css',
      save_as='blue_page.png'
  )

  9

Bên trong thùng chứa đó, gói

html = """
 An interesting title 
 This page will be red"""
css = "body {background: red;}"

hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')

hti.screenshot(other_file='star.svg')

Bạn có thể tải và thực thi tập lệnh Python để sử dụng gói hoặc chỉ sử dụng CLI.

Trên hết, bạn cũng có thể sử dụng các tập để liên kết một thư mục container với thư mục máy cục bộ của mình, cho phép bạn truy xuất các hình ảnh được tạo hoặc thậm chí tải một số tài nguyên (HTML, CSS hoặc Python tệp).

Kiểm tra

Chỉ có thử nghiệm cơ bản có sẵn tại thời điểm này. Để chạy thử nghiệm, hãy cài đặt các yêu cầu (gối) và chạy pytest tại gốc của dự án:

from html2image import Html2Image
hti = Html2Image()

Câu hỏi thường gặp

• Tôi có thể tự động chụp ảnh màn hình toàn trang không? Đáng buồn là không, nó không dễ dàng có thể. HTML2Image dựa vào chế độ không đầu của trình duyệt Chrome/crom để chụp ảnh màn hình và không có cách nào để "hỏi" cho một ảnh chụp màn hình toàn trang vào lúc này. Nếu bạn biết một cách để lấy một (bằng cách ước tính kích thước trang chẳng hạn) tôi rất vui khi thấy nó, vì vậy hãy mở một vấn đề hoặc một cuộc thảo luận!
  Sadly no, it is not easily possible. Html2Image relies on the headless mode of Chrome/Chromium browsers to take screenshots and there is no way to "ask" for a full page screenshot at the moment. If you know a way to take one (by estimating the page size for example) I would be happy to see it, so please open an issue or a discussion!

• Tôi có thể thêm độ trễ trước khi chụp ảnh màn hình không? Có bạn có thể, xin vui lòng xem phần

  hti.screenshot(other_file='star.svg')

  2 của ReadMe.
  Yes you can, please take a look at the

  hti.screenshot(other_file='star.svg')

  2 section of the readme.

• Tôi có thể tăng tốc quá trình chụp ảnh màn hình không? Có, khi bạn đang chụp nhiều ảnh chụp màn hình, bạn có thể đạt được "hiệu suất" tốt hơn bằng cách sử dụng các phương pháp xử lý hoặc đa xử lý song song. Bạn có thể tìm thấy một ví dụ về nó ở đây.
  Yes, when you are taking a lot of screenshots, you can achieve better "performances" using Parallel Processing or Multiprocessing methods. You can find an example of it here.

• Tôi có thể làm cho một phương thức cookie biến mất không? Có và không. Không vì không có tùy chọn nào để thực hiện một cách kỳ diệu và các phần mở rộng không được hỗ trợ trong Chrome không đầu (phần mở rộng

  hti.screenshot(other_file='star.svg')

  3 sẽ hữu ích trong trường hợp này). Có bởi vì bạn có thể làm cho bất kỳ yếu tố nào của một trang biến mất bằng cách truy xuất mã nguồn của nó, sửa đổi nó như bạn muốn và cuối cùng đã trình bày về mã nguồn được sửa đổi.
  Yes and no. No because there is no options to do it magically and extensions are not supported in headless Chrome (The

  hti.screenshot(other_file='star.svg')

  3 extension would have been useful in this case). Yes because you can make any element of a page disappear by retrieving its source code, modifying it as you wish, and finally screenshotting the modified source code.

Những việc cần làm

• Một CLI đẹp (hiện đang ở trạng thái WIP).
• Hỗ trợ của các trình duyệt khác (như Firefox khi tính năng ảnh chụp màn hình của họ sẽ hoạt động).
• Thế hệ pdf?
• Đóng góp, các mẫu phát hành, mẫu yêu cầu kéo, mã ứng xử.

Nếu bạn thấy bất kỳ lỗi chính tả hoặc thông báo nào được nói, hãy thoải mái tạo ra một vấn đề hoặc yêu cầu kéo.