Nhà phát triển ứng dụng hoặc trò chơi luôn cần một công cụ/tập lệnh chuyển đổi html tĩnh hoặc động của bạn thành hình ảnh. Như trong trường hợp nếu bạn là nhà phát triển php và muốn biết cách chuyển đổi html sang hình ảnh jpeg một cách đơn giản thì bài viết này là dành cho bạn
Trong bài đăng này, bạn sẽ tìm hiểu cách chuyển đổi html thành hình ảnh. Tôi phải khám phá ra thủ thuật này khi tôi đang tạo một trò chơi trên facebook và tập lệnh cần đăng điểm trò chơi động trên tường của người dùng. Khách hàng của tôi đã cung cấp cho tôi html của trang web kết quả nhưng tất cả những gì chúng tôi cần chỉ là chuyển đổi html kết quả động này thành jpeg
Đây là cách đơn giản và bạn phải thỏa hiệp với chất lượng hình ảnh của nó. Tập lệnh html thành hình ảnh php này không yêu cầu bất kỳ api bên ngoài hoặc Thư viện GD nào, Hầu hết máy chủ không có tiện ích mở rộng thư viện GD
Thử nghiệm
Tại sao chúng ta cần chuyển đổi html sang hình ảnh
Như tôi đã nói nếu chúng tôi có một số html và đó là trang html hoặc php có thể thay đổi và chúng tôi muốn chụp nó dưới dạng ảnh chụp nhanh
- Phát triển ứng dụng Facebook
- Đối với trang web Hướng dẫn
- Vì mục đích phát triển
Những gì chúng ta không cần để chuyển đổi html thành hình ảnh bằng php
Chúng tôi sẽ tạo html để chụp nhanh mà không cần sử dụng bất kỳ thư viện gd php hoặc bất kỳ API bên thứ ba nào. Bây giờ chúng ta sẽ chuyển html sang pdf bằng php
Tạo ảnh chụp màn hình hình ảnh hoàn hảo của trang web hoặc chuyển đổi HTML trực tiếp thành hình ảnh bằng cách sử dụng các tính năng sau của API PHP của GrabzIt. Tuy nhiên, trước khi bạn bắt đầu, hãy nhớ rằng sau khi gọi phương thức hoặc, phương thức hoặc phải được gọi để tạo hình ảnh
Tùy chọn cơ bản
Chỉ cần một tham số để chụp ảnh màn hình trang web hoặc chuyển đổi HTML thành hình ảnh như trong ví dụ sau
$grabzIt->URLToImage("//www.tesla.com"); //Then call the Save or SaveTo method
$grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method
$grabzIt->FileToImage("example.html"); //Then call the Save or SaveTo method
định dạng hình ảnh
API PHP của GrabzIt có thể tạo hình ảnh ở nhiều định dạng, bao gồm JPG, PNG, WEBP, BMP (8 bit, 16 bit, 24 bit hoặc 32 bit) và TIFF. Định dạng mặc định cho hình ảnh là JPG. Tuy nhiên, chất lượng của hình ảnh JPG có thể không đủ tốt đối với một số ứng dụng trong những trường hợp này, định dạng PNG được khuyến nghị cho ảnh chụp màn hình vì nó mang lại sự cân bằng tốt giữa chất lượng và kích thước tệp. Ví dụ dưới đây cho thấy một hình ảnh được tạo bằng định dạng PNG
Kích thước trình duyệt
Kích thước trình duyệt đề cập đến kích thước của cửa sổ trình duyệt sẽ được sử dụng khi chụp ảnh màn hình trong hầu hết các trường hợp, điều này không cần phải đặt vì kích thước trình duyệt mặc định sẽ đủ cho hầu hết mọi tác vụ. Để đặt kích thước trình duyệt, chỉ cần chuyển một giá trị cho các phương thức $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 0 và $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 1 của lớp
Thay đổi kích thước hình ảnh
Thay đổi kích thước của một hình ảnh rất dễ dàng, làm điều đó mà không làm biến dạng hình ảnh khó hơn một chút. Để làm cho toàn bộ quá trình đơn giản hơn, chúng tôi khuyên bạn nên sử dụng
Nếu bạn muốn tăng chiều rộng và chiều cao của hình ảnh lên kích thước lớn hơn chiều rộng và chiều cao của trình duyệt, theo mặc định là 1366 x 728 pixel, thì chiều rộng và chiều cao của trình duyệt cũng phải được tăng lên để phù hợp
Số nhận dạng tùy chỉnh
Bạn có thể chuyển một mã định danh tùy chỉnh cho các phương thức như được hiển thị bên dưới, giá trị này sau đó được trả về trình xử lý GrabzIt PHP của bạn. Chẳng hạn, mã định danh tùy chỉnh này có thể là mã định danh cơ sở dữ liệu, cho phép liên kết ảnh chụp màn hình hoặc hình ảnh với một bản ghi cơ sở dữ liệu cụ thể
Toàn bộ chiều dài ảnh chụp màn hình
GrabzIt cho phép bạn chụp toàn bộ ảnh chụp màn hình của toàn bộ trang web để thực hiện việc này, bạn cần chuyển -1 cho phương thức $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 1. Để đảm bảo hình ảnh phù hợp với kích thước của trình duyệt, hãy chuyển -1 cho các phương thức $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 3 và $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 4
________số 8_______
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret"); $options = new \GrabzIt\GrabzItImageOptions(); $options->setBrowserHeight(-1); $options->setWidth(-1); $options->setHeight(-1); $grabzIt->HTMLToImage("Hello World!", $options); //Then call the Save or SaveTo method $grabzIt->SaveTo("result.jpg");
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret"); $options = new \GrabzIt\GrabzItImageOptions(); $options->setBrowserHeight(-1); $options->setWidth(-1); $options->setHeight(-1); $grabzIt->FileToImage("example.html", $options); //Then call the Save or SaveTo method $grabzIt->SaveTo("result.jpg");
Bạn cũng có thể trả lại ảnh chụp màn hình không bị cắt, nhưng hãy cẩn thận, điều này có thể tạo ra hình ảnh lớn. Để thực hiện việc này, hãy chuyển -1 đến các phương thức $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 3 và/hoặc $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 4. Bất kỳ thứ nguyên nào được thông qua -1 sẽ không bị cắt
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret"); $options = new \GrabzIt\GrabzItImageOptions(); $options->setWidth(-1); $options->setHeight(-1); $grabzIt->HTMLToImage("Hello World!", $options); //Then call the Save or SaveTo method $grabzIt->SaveTo("result.jpg");
Lưu ý không có chiều dài trình duyệt đầy đủ
Sử dụng các giá trị đặc biệt này có nghĩa là bạn có thể tạo ảnh chụp màn hình là phiên bản có tỷ lệ đầy đủ của toàn bộ trang web nếu muốn
Chụp ảnh màn hình của một phần tử trang
GrabzIt cho phép bạn chụp ảnh màn hình của một phần tử HTML, chẳng hạn như thẻ $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 7 hoặc $grabzIt->HTMLToImage("Hello World!"); //Then call the Save or SaveTo method 8 và chụp tất cả nội dung của nó. Để làm điều này, phần tử HTML bạn muốn chụp ảnh màn hình phải được chỉ định làm bộ chọn CSS
...
World Peace Announced
...Đối với ví dụ bên dưới, chúng tôi sẽ chọn div có id là "features" và xuất nó dưới dạng ảnh JPEG 250 x 250px
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret"); // The 250 parameters indicates that image should be sized to 250 x 250 px $options = new \GrabzIt\GrabzItImageOptions(); $options->setWidth(250); $options->setHeight(250); $options->setFormat("jpg"); $options->setTargetElement("#features"); $grabzIt->URLToImage("//www.bbc.co.uk/news", $options); //Then call the Save or SaveTo method $grabzIt->SaveTo("result.jpg");Ví dụ tiếp theo chụp một ảnh chụp màn hình khác của div "features" nhưng lần này xuất ra một hình ảnh JPEG có kích thước chính xác của div