Code chụp ảnh màn hình (screenshot) web với Node.js

Bởi

Việc tự động chụp ảnh màn hình một trang web tương đối là phức tạp. Một số trình duyệt như Firefox đã tích hợp hẳn một tính năng chụp ảnh toàn bộ một trang web. Tuy nhiên, đó là ở góc độ một trình duyệt. Nếu bạn muốn tạo một tính năng chụp ảnh màn hình một website khác từ ứng dụng web của mình thì sao?

Bài viết này mình sẽ hướng dẫn các bạn tự tạo tính năng chụp màn hình với Node.js với sự trợ giúp của thư viện Puppeteer. Đây là một tính răng rất thú vị và hữu ích, bạn có thể thỏa sức sáng tạo với ý tưởng của tính năng này.

Nội dung chính của bài viết

1. Tìm hiểu API chụp ảnh màn hình với Node.js
2. Screenshot

1. Tìm hiểu API chụp ảnh màn hình với Node.js

Trước khi đi vào viết code ngay, chúng ta cùng nhau nghía qua xem screenshot API có những options nào.

Cùng xem qua danh sách các options:

path: Đường dẫn để lưu screenshot sau được tạo.
type: Định dạng hình ảnh. Bạn có thể chọn jpeg hoặc png
quality: Chất lượng hình ảnh từ 0-100.
fullPage: Nếu bạn để giá trị là true thì sẽ chụp toàn bộ trang web.
clip: Thiết lập này giúp bạn có thể chụp một vùng của trang web.
omitBackground: Loại bỏ background màu trắng, thay bằng transparency.
encoding: Định dạng mã hóa của hình ảnh screenshot, base64 hoặc binary.

Các bạn có thể tham khảo tại đây mô tả chính thức của API mà Puppeteer cung cấp.

Lưu ý: Kết quả của screenshot API là một Promise. Do vậy, bạn chỉ nhận được kết quả trong hàm resolve() mà thôi.

>>Tìm hiểu thêm Promise: Tìm hiểu cách sử dụng promise trong Javascript

2. Screenshot

Bây giờ là phần mình sẽ hướng dẫn các bạn thực hành. Trước tiên, các bạn tạo dự án Node.js như bình thường. Sau đó cài đặt Puppeteer bằng lệnh npm:

npm i puppeteer

Để chụp ảnh màn hình (screenshot) bạn làm như sau:

const puppeteer = require("puppeteer");

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  // open the browser and prepare a page
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  // set the size of the viewport, so our screenshot will have the desired size
  await page.setViewport({
      width: 1280,
      height: 800
  })

  await page.goto('https://vntalking.com/')
  await page.screenshot({
      path: 'vntalking.png',
      fullPage: true
  })

  // close the browser 
  await browser.close();
};

// run the async function
run();

Đoạn mã trên sẽ tạo một screenshot của toàn bộ trang web với chiều rộng là 1280px (tất nhiên là bạn có thể thay đổi giá trị này tùy ý). Ảnh chụp sẽ được lưu cùng thư mục mà có tệp chứa đoạn code trên, bạn hoàn toàn có thể thay đổi đường dẫn và tên tệp ảnh.

Bạn thấy đấy, với sự trợ giúp của Puppeteer, việc tạo tính năng chụp ảnh màn hình với Node.js trở nên cực kì đơn giản phải không? Nếu bạn ưu thích Node.js thì đừng quên đăng ký nhận bài viết hướng dẫn Node.js độc quyền từ mình nhé.