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

0
Dịch vụ dạy kèm gia sư lập trình

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.

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é.

Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng
Bài trướcHiểu về cluster trong Node.js – đa luồng trong Node.js
Bài tiếp theoCách lấy vị trí người dùng trong Javascript với Geolocation API
Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường chẳng xin được việc đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé !

Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Thông báo