Hướng dẫn php convert html css to image - php chuyển đổi html css sang hình ảnh

PHP: HTML/CSS TO Image

Tạo hình ảnh PNG, JPG hoặc webp với PHP. Kết xuất chính xác như Google Chrome.

Nội dung chính Show

• PHP: HTML/CSS TO Image
• Tạo hình ảnh với PHP
• Xác thực với PHP
• Mã ví dụ PHP
• Ví dụ PHP với thư viện guzz
• Cần giúp đỡ?
• Giải pháp phụ của khách hàng
• Giải pháp phụ của máy chủ
• A (có thể tốt hơn) thay thế cho phía máy chủ

Bản demo trực tiếp Nhận khóa API

---

Mục lục

• Tạo hình ảnh với PHP
• Xác thực với PHP
• Mã ví dụ PHP
• Ví dụ PHP với thư viện guzz
• Lỗi gỡ lỗi: Vấn đề chứng chỉ SSL: Không thể nhận được chứng chỉ phát hành cục bộ
• Cần giúp đỡ?

Tạo hình ảnh với PHP

1. API lấy HTML/CSS của bạn và chạy nó trong một ví dụ thực tế của Google Chrome để chuyển đổi HTML của bạn thành một hình ảnh.convert your html into an image.
2. Sử dụng PHP để gửi API HTML/CSS của bạn.
3. Bạn sẽ nhận lại JSON với URL cho hình ảnh được tạo của bạn.

Để biết thêm chi tiết về cách thức hoạt động của nó, hãy xem tạo một hình ảnh.

Ví dụ API phản hồi:

{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}

Xác thực với PHP

API sử dụng xác thực cơ bản HTTP.

Tên người dùng của bạn là ID người dùng của bạn và mật khẩu của bạn là khóa API của bạn. Cả hai đều có sẵn từ bảng điều khiển. Mẫu mã PHP trình bày cách xác thực yêu cầu của bạn.User ID and your password is your API Key. Both of these are available from the dashboard. The PHP code sample demonstrates how to authenticate your request.

Bạn có thể đăng ký khóa API miễn phí để bắt đầu.

Khóa API miễn phí cho PHP

---

Mã ví dụ PHP

Ví dụ mã PHP này gửi một bài đăng HTTP đến API https://hcti.io/v1/image. Chuyển đổi HTML/CSS của bạn thành một hình ảnh với PHP.

  Generated from PHP ✅

Ví dụ PHP với thư viện guzz

Sử dụng thư viện HTTP như Guzz có thể đơn giản hóa mã của bạn hơn nữa. Dưới đây, một ví dụ về cách sử dụng API HTML/CSS để hình ảnh với GUZLE.

Hướng dẫn cài đặt cho Guzz ở đây.

Pong ✅";
$css = ".ping { padding: 20px; font-family: 'sans-serif'; }";
$client = new GuzzleHttpClient();
// Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard
$res = $client->request('POST', 'https://hcti.io/v1/image', [
'auth' => ['user_id', 'api_key'],
'form_params' => ['html' => $html, 'css' => $css]
]);
echo $res->getBody();
// {"url":"https://hcti.io/v1/image/5803a3f0-abd3-4f56-9e6c-3823d7466ed6"}
?>

Mã hóa ra là dễ đọc hơn và ít phức tạp hơn khi sử dụng Guzle. Một tùy chọn tuyệt vời nếu bạn mở để thêm thư viện vào dự án của bạn.

Khi chạy tập lệnh này trên máy Windows, có thể bạn sẽ gặp lỗi SSL. Việc sửa chữa cho điều này là ở đây.

Cần giúp đỡ?

Chúng tôi luôn luôn tìm cách cải thiện tài liệu này. Xin vui lòng gửi email cho chúng tôi: . Chúng tôi trả lời nhanh.. We respond fast.

Giải pháp phụ của khách hàng

Ở phía khách hàng, bạn có thể sử dụng một cái gì đó như thư viện (sử dụng HTML 5): http://html2canvas.hertzen.com/ =)

Với nó, bạn có thể sử dụng một cái gì đó như:

html2canvas(document.getElementById("element-id"), {
onrendered: function(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png"); // This should be image/png as browsers (only) support it (to biggest compatibilty)
  // Append image (yes, it is a DOM element!) to the DOM and etc here..
}
});

Giải pháp phụ của máy chủ

Để có được giải pháp phụ của máy chủ, bạn có thể sử dụng Phantomjs (sử dụng webkit) hoặc slimerjs (sử dụng tắc kè).

Một thư viện tốt là một trình bao bọc cho hai người này là casperjs. Sử dụng CASPERJS, một mã có thể được sử dụng là:

casper.start(casper.cli.args[0], function() {
    this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});

casper.run();

Lưu nó dưới dạng screenshot.js (chỉ là một ví dụ về tên, bạn cũng có thể chọn một tên) và chạy nó bằng cách sử dụng một cái gì đó như:

casperjs screenshot.js (URL) (image path) (selector)

Từ bất kỳ ngôn ngữ nào.any language.

A (có thể tốt hơn) thay thế cho phía máy chủ

Tùy chọn khác là sử dụng selen, nhưng điều này chỉ hợp lệ nếu bạn có thể chạy Java trong máy chủ của mình (và cài đặt trình duyệt theo cách thủ công) (tuy nhiêncan run Java in your server (and install browsers manually) (PhantomJS/SlimerJS/CasperJS, however, does not have these requeriments)

Chỉ sử dụng nó nếu bạn cần mô phỏng hoàn toàn trình duyệt (có thể khi sử dụng plugin ...)need to emulate a browser completely (maybe when using plugins...)

Tốt nhất của selen là bạn có thể sử dụng trình bao bọc để kết nối với nó (sử dụng máy chủ selenium), xem tài liệu để có được danh sách: http://code.google.com/p/selenium/w/list