Chuyển đổi html sang hình ảnh laravel

Browsershot là gói có thể dễ dàng chuyển đổi bất kỳ trang web nào thành hình ảnh. Dưới mui xe, chuyển đổi có thể thực hiện các tùy chọn không đầu mới trong Chrome 59. Trong bài đăng này, tôi muốn chỉ cho bạn cách bạn có thể sử dụng Browsershot v2

Đây là một ví dụ nhanh về cách nó có thể được sử dụng

Browsershot::url('https://example.com')->save($pathToImage);

Môn lịch sử

Khoảng ba năm trước, tôi bắt đầu làm việc với gói đầu tiên của mình, có tên là Browsershot. Nó có thể chuyển đổi bất kỳ trang web nào thành hình ảnh. Dưới mui xe PhantomJS đã được sử dụng để thực hiện chuyển đổi. Kể từ khi nó được phát hành, nó đã hoạt động khá tốt, nhưng tiếc là PhantomJS gần đây đã bị bỏ rơi

Vài tuần trước, Chrome 59 đã được phát hành. Trong phiên bản đó, một số tính năng khá thú vị đã được giới thiệu. Một trong số đó là khả năng chụp ảnh màn hình của trang web. Phiên bản Chrome gần đây có thể tốt hơn trong việc hiển thị đúng trang và phiên bản PhantomJS bị bỏ rơi. Đó là lý do tại sao tôi quyết định thực hiện một bản phát hành chính mới của Browsershot. Trong bài đăng này, tôi muốn chỉ cho bạn cách bạn có thể sử dụng Browsershot v2

Cài đặt Chrome 59

Để sử dụng Browsershot, bạn phải đảm bảo rằng Chrome 59 trở lên đã được cài đặt trên hệ thống của bạn. Trên Ubuntu 16 được Forge cung cấp. 04 bạn có thể cài đặt phiên bản Chrome ổn định mới nhất như thế này

sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get -f install
sudo apt-get install google-chrome-stable

Trình duyệt đã được thử nghiệm trên MacOS và Ubuntu 16. 04. Nếu bạn sử dụng hệ điều hành khác, số dặm của bạn có thể thay đổi

Sử dụng trình duyệt

Đây là cách dễ nhất để tạo hình ảnh của trang web

Browsershot::url('https://example.com')->save($pathToImage);

Trình duyệt sẽ đoán vị trí của Google Chrome. Nếu không tìm thấy Chrome trên hệ thống của bạn, bạn có thể gợi ý vị trí của nó theo cách thủ công

Browsershot::url('https://example.com')
   ->setChromePath($pathToChrome)
   ->save($pathToImage);

Theo mặc định, ảnh chụp màn hình sẽ là png và kích thước của nó sẽ khớp với độ phân giải bạn sử dụng cho màn hình của mình. Muốn có một kích thước khác của ảnh chụp màn hình?

Browsershot::url('https://example.com')
    ->windowSize(640, 480)
    ->save($pathToImage);

Bạn cũng có thể đặt kích thước của hình ảnh đầu ra độc lập với kích thước của cửa sổ. Dưới đây là cách thay đổi kích thước ảnh chụp màn hình với độ phân giải 1920x1080 và thu nhỏ kích thước đó thành thứ phù hợp với bên trong 200x200

Browsershot::url('https://example.com')
    ->windowSize(1920, 1080)
    ->fit(Manipulations::FIT_CONTAIN, 200, 200)
    ->save($pathToImage);

Trên thực tế, bạn có thể sử dụng tất cả các phương pháp mà spatie/image cung cấp. Đây là một ví dụ nơi hình ảnh thang độ xám được tạo

Browsershot::url('https://example.com')
    ->windowSize(640, 480)
    ->greyscale()
    ->save($pathToImage);

Nếu vì lý do nào đó, bạn muốn đặt tác nhân người dùng mà Google Chrome sẽ sử dụng khi chụp ảnh màn hình, bạn có thể làm như vậy

Browsershot::url('https://example.com')
    ->userAgent('My Special Snowflake Browser 1.0')
    ->save($pathToImage);

kết thúc

Khả năng chụp ảnh màn hình của Chrome đã khá tốt nhưng vẫn còn nhiều chỗ cần cải thiện. Hiện tại, không có cách nào để chỉ định nơi Chrome sẽ lưu ảnh chụp màn hình (một vấn đề mà gói giải quyết cho bạn ở hậu trường). Trong DevTools có một tùy chọn để chụp ảnh màn hình toàn bộ chiều dài của trang. Thật không may, điều này là không thể với các tùy chọn dòng lệnh hiện tại

Tôi khá chắc chắn rằng các tùy chọn không đầu và chụp ảnh màn hình sẽ được cải thiện trong các phiên bản Chrome sau này. Tôi dự định cập nhật Browsershot ngay khi có các tính năng mới trong Chrome

Bạn muốn bắt đầu sử dụng Browsershot? . Ngoài ra, hãy xem các gói khác mà nhóm của chúng tôi đã thực hiện trước đây

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

Làm cách nào để chuyển đổi mã HTML thành hình ảnh PNG bằng PHP?

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 Javascript?