Tôi có thể chụp ảnh màn hình bằng javascript không?

Bài viết này khám phá một số công cụ và thư viện phổ biến nhất cho phép bạn dễ dàng chụp ảnh màn hình trang web bằng javascript và nút. js

Ảnh chụp màn hình trang web với Puppeteer

Puppeteer là một nút. thư viện js tự động hóa crom và chrome không đầu. Điều này cho phép chúng tôi duyệt đến một url và chụp ảnh màn hình trang web. Nó được duy trì bởi nhóm giao thức chrome devtools

Hãy xem bài viết của chúng tôi về cách sử dụng nghệ sĩ múa rối để chụp ảnh màn hình trang web để có cái nhìn sâu hơn

Để bắt đầu sử dụng con rối, trước tiên chúng ta cần cài đặt nó bằng npm

npm install puppeteer

Tiếp theo, chúng ta cần nhập mô-đun người múa rối và viết kịch bản người múa rối đầu tiên

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Sao chép mã vào một tệp có tên

node puppeteer-screenshot.js

node puppeteer-screenshot.js

Ảnh chụp màn hình được tạo có tên là

node puppeteer-screenshot.js

Như bạn có thể thấy, hầu hết ảnh chụp màn hình được hiển thị bởi quảng cáo ở trên cùng và biểu ngữ cookie ở phía dưới

Đây là sự cố phổ biến khi chụp ảnh màn hình trang web và có thể tốn thời gian để khắc phục

Nếu bạn đang tìm kiếm một giải pháp tự động và dành cho bạn, chúng tôi đã xây dựng hộp url để giải quyết những vấn đề này và hơn thế nữa

Sử dụng Playwright để chụp ảnh màn hình trang web

Nhà viết kịch là đứa trẻ mới trong khối thư viện tự động hóa trình duyệt không đầu

Nhà viết kịch được duy trì bởi microsoft. API rất giống với nghệ sĩ múa rối, trên thực tế, một số nhà phát triển ban đầu của nghệ sĩ múa rối hiện đang làm việc để phát triển và duy trì nhà viết kịch

Điều tuyệt vời về nhà viết kịch là nó có thể được sử dụng để tự động hóa crom, firefox và webkit bằng cùng một API. Điều này có nghĩa là nó có thể dễ dàng được sử dụng để kiểm tra ảnh chụp màn hình trên nhiều trình duyệt

Trước tiên, hãy cài đặt nhà viết kịch bằng npm

npm install playwright

Bây giờ chúng ta có thể tạo tập lệnh tự động hóa trình duyệt viết kịch đầu tiên của mình

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

Tập lệnh khởi chạy trình duyệt crom, đặt chế độ xem thành

node puppeteer-screenshot.js

Lưu mã sau vào

node puppeteer-screenshot.js

node playwright-screenshot.js

Đây là ảnh chụp màn hình kết quả

Một lần nữa, ảnh chụp màn hình có sẵn mặc định bị che khuất bởi quảng cáo và biểu ngữ cookie

Ảnh chụp màn hình trang web trình điều khiển web Selenium

Selenium là bộ công cụ tự động hóa web cho phép tự động hóa nhiều trình duyệt

Đối với mỗi trình duyệt chúng tôi muốn tự động hóa, chúng tôi cần cài đặt trình điều khiển triển khai đặc tả trình điều khiển web của W3C. Để điều khiển chrome từ selen, chúng tôi sẽ sử dụng dự án

node puppeteer-screenshot.js

Thuận tiện là có một gói npm cài đặt tệp nhị phân chromedriver và cung cấp nó cho tập lệnh Selenium của chúng tôi

Chúng tôi cũng cần cài đặt gói npm

npm install playwright

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Bây giờ hãy tạo tập lệnh chụp ảnh màn hình Selenium. Lưu đoạn mã sau vào

npm install playwright

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

và chạy kịch bản

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Tập lệnh khởi động một phiên bản chrome, sau đó điều hướng đến URL, chụp ảnh màn hình và lưu nó vào hệ thống tệp cục bộ dưới dạng

npm install playwright

Đây là ảnh chụp màn hình kết quả

Sử dụng Electron cho ảnh chụp màn hình trang web

Electron nổi tiếng là một nền tảng để xây dựng các ứng dụng máy tính để bàn đa nền tảng bằng cách sử dụng bộ ba công nghệ web HTML, CSS và JavaScript thần thánh

Nó là nền tảng của một số ứng dụng dành cho máy tính để bàn như VS-Code, Spotify và Microsoft Teams

Vì nó sử dụng một phiên bản crom để hiển thị ứng dụng nên nó cũng có thể được sử dụng để tự động hóa trình duyệt không đầu và thậm chí tạo ảnh chụp màn hình trang web

Để sử dụng được electron, chúng ta cần cài đặt nó bằng npm

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Bây giờ, trước tiên hãy tạo điểm vào điện tử

npm install playwright

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Điểm vào

npm install playwright

Nó yêu cầu

npm install playwright

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Ảnh chụp màn hình. js xuất một hàm lấy url, tên tệp và hàm gọi lại

Chức năng này được gọi từ chính. js và điều hướng đến URL được truyền vào, sau đó gọi

npm install playwright

npm install playwright

Hàm

npm install playwright

npm install playwright

Ảnh chụp màn hình sau đó được lưu vào tệp PNG. Dữ liệu hình ảnh cũng có thể được chuyển trở lại quy trình chính dưới dạng chuỗi URL dữ liệu base64

Đây là ảnh chụp màn hình kết quả

Khá bất tiện khi sử dụng điện tử để tạo ảnh chụp màn hình hoàn toàn vì mục đích chính của nó là để viết các ứng dụng máy tính để bàn đa nền tảng

Đôi khi có thể gây nhầm lẫn mã nào thuộc ngữ cảnh nào. Tuy nhiên, thư viện tiếp theo trong danh sách của chúng tôi cố gắng trừu tượng hóa điện tử và làm cho nó giống một công cụ tự động hóa web hơn

Urlbox trước đây đã sử dụng điện tử để tạo ảnh chụp màn hình trang web, trước khi người múa rối được phát hành. Một nhược điểm khác của điện tử là phiên bản crom mà nó phụ thuộc vào không được cập nhật thường xuyên như đối với nghệ sĩ múa rối và nhà viết kịch

Điều này có nghĩa là các tính năng mới hơn sẽ hỗ trợ chậm hơn và các lỗ hổng bảo mật có nhiều khả năng vẫn chưa được vá

URL tới hình ảnh với Nightmare. js

cơn ác mộng. js là một nút. thư viện js được phát triển bởi nhóm tại phân khúc. Nó được xây dựng dựa trên Electron, nhưng có API cấp cao hơn giúp làm việc dễ dàng hơn đối với các tác vụ đơn giản, chẳng hạn như chụp ảnh màn hình trang web

Cài đặt cơn ác mộng qua npm

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Bây giờ hãy tạo tệp

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Chạy tập lệnh

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Bạn sẽ thấy trình duyệt mở và tải nytimes. trang com

Thật không may, khi tôi thử chạy tập lệnh này, nytimes. trang web com được tải ban đầu, nhưng sau đó biến mất và tôi chỉ còn lại một ảnh chụp màn hình trống

Khi kiểm tra bảng điều khiển devtools, tôi có thể thấy một vài lỗi JavaScript

Tôi cho rằng cơn ác mộng đó đang sử dụng một phiên bản cũ của điện tử, do đó đang sử dụng một phiên bản crom đã lỗi thời không tải được nytimes. trang web com đầy đủ

Hãy thử lại với một url khác

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Tôi cũng gặp sự cố khi chạy tập lệnh này, lần này cơn ác mộng đang phát ra

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Nhìn vào repo github cho cơn ác mộng, có vẻ như lần xác nhận cuối cùng là vào năm 2019

Nếu bạn đang sử dụng cơn ác mộng để hiển thị ảnh chụp màn hình trang web, tôi khuyên bạn nên chuyển sang nghệ sĩ múa rối hoặc nhà viết kịch để tự động hóa các trình duyệt mới nhất. Tất nhiên, bạn cũng có thể dùng thử API ảnh chụp màn hình của urlbox nếu không muốn gặp rắc rối khi duy trì microservice của riêng mình

Ảnh chụp màn hình trang web với Phantom. js

ma. js là trình duyệt web không đầu ban đầu có thể được tự động hóa bằng JavaScript

Nó sử dụng QtWebkit làm công cụ kết xuất

Quá trình phát triển dự án đã bị tạm dừng và bạn nên nâng cấp bất kỳ dịch vụ vi mô nào sử dụng phantom. js thành nghệ sĩ múa rối hoặc nhà viết kịch

Hãy xem nếu nytimes. ảnh chụp màn hình com có ​​thể được tạo bằng phantom. js

Đầu tiên chúng ta cần cài phantom. js

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Vì phantomjs là một tệp nhị phân độc lập và không phải là gói dành riêng cho nút, nên nó không thể chạy trực tiếp từ nút. Thay vào đó, bạn có thể chạy tệp nhị phân trực tiếp hoặc sử dụng API quy trình con của nút để tạo quy trình mới và chạy ph Phantomjs theo cách đó

Để tiện sử dụng chúng ta sẽ chạy trực tiếp phantomjs binary. Chúng ta chỉ cần truyền cho nó một tập lệnh để chạy. Đây là bóng ma của chúng ta. tập lệnh js

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Theo mặc định, bóng ma. js sẽ cố gắng chụp ảnh màn hình toàn trang, trong khi chúng tôi chỉ muốn phần chế độ xem hiển thị của trang. Đây là lý do tại sao chúng tôi đã xác định rõ ràng các thuộc tính

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

Lưu mã trên vào một tệp có tên

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

const puppeteer = require("puppeteer");
puppeteer
  .launch({
    defaultViewport: {
      width: 1280,
      height: 2000,
    },
  })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://nytimes.com");
    await page.screenshot({ path: "nyt-puppeteer.png" });
    await browser.close();
  });

Nó sẽ chụp ảnh màn hình vào tệp

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

Có vẻ như chúng tôi đã tạo thành công ảnh chụp màn hình của nytimes. com với phantom. js

Có vẻ như phiên bản của nytimes. com mà chúng tôi đã hiển thị là trang không có javascript bật và do đó không có quảng cáo hoặc biểu ngữ cookie

Điều này chắc hẳn là do nó đã phát hiện ra trình duyệt phantomjs dựa trên QTWebkit đã lỗi thời và chọn cung cấp cho chúng tôi một phiên bản đơn giản hóa của trang của họ

API ảnh chụp màn hình trang web Urlbox

Urlbox là API ảnh chụp màn hình có thể được sử dụng để tạo ảnh chụp màn hình trang web và tệp PDF từ URL. Nó được xây dựng dựa trên trình múa rối và có gói npm để chụp ảnh màn hình có sẵn cho nút. js

Bạn có thể muốn dùng thử hộp url nếu cảm thấy nản lòng khi dành nhiều thời gian để duy trì ảnh chụp màn hình hoặc URL của riêng mình tới vi dịch vụ kết xuất PDF. Có bản dùng thử miễn phí 7 ngày và giá bắt đầu từ $10 mỗi tháng

Chúng tôi hiển thị hàng triệu ảnh chụp màn hình và tệp PDF mỗi tháng và xử lý song song 100 phiên bản chrome không đầu trên quy mô lớn. Có rất nhiều tùy chọn cho phép bạn hiển thị , ẩn biểu ngữ cookie và chặn quảng cáo khỏi ảnh chụp màn hình hoặc sử dụng để tránh bị chặn bởi các trang web

Tài liệu về API có thể được tìm thấy tại urlbox. io/tài liệu

Trước tiên, hãy cài đặt gói urlbox từ npm

Để chúng tôi có thể tải xuống ảnh chụp màn hình từ urlbox, chúng tôi cũng sẽ cài đặt thư viện yêu cầu http,

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

node puppeteer-screenshot.js

Để xác thực bằng API Urlbox, chúng tôi cần đăng ký và truy xuất khóa API và bí mật của chúng tôi, sau đó chuyển chúng vào gói

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

node puppeteer-screenshot.js

Hãy chạy tập lệnh này và đợi ảnh chụp màn hình được tải xuống

node puppeteer-screenshot.js

Đây là ảnh chụp màn hình kết quả,

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

Ngay lập tức chúng ta có thể thấy rằng quảng cáo đang hiển thị ở trên cùng

Để loại bỏ điều này, chúng tôi có thể kích hoạt trình chặn quảng cáo bằng cách chuyển tùy chọn

const { chromium } = require("playwright");
(async () => {
  let browser = await chromium.launch();
 
  let page = await browser.newPage();
  await page.setViewportSize({ width: 1280, height: 1080 });
  await page.goto("http://nytimes.com");
  await page.screenshot({ path: `nyt-playwright-chromium.png` });
  await browser.close();
})();

node puppeteer-screenshot.js

Chạy tập lệnh với tùy chọn được đặt thành true sẽ dẫn đến ảnh chụp màn hình mà không có quảng cáo hiển thị

Chúng tôi có thể thấy rằng quảng cáo không còn tải nữa vì quảng cáo hiện đang bị chặn bởi Urlbox, nhưng vùng chứa vẫn hiển thị đang chiếm một phần đáng kể ảnh chụp màn hình của chúng tôi với khoảng trống

Để loại bỏ điều này, chúng ta có thể yêu cầu urlbox cuộn xuống phần tử đầu tiên bên dưới quảng cáo

Chúng tôi có thể chuyển vào tùy chọn có giá trị là

node playwright-screenshot.js

node puppeteer-screenshot.js

Bây giờ, nếu chúng tôi kiểm tra ảnh chụp màn hình thu được, chúng tôi sẽ thấy vùng chứa quảng cáo không còn hiển thị nữa

Điều này chỉ cho thấy thật dễ dàng để có được ảnh chụp màn hình hoàn hảo bằng cách sử dụng API urlbox và có nhiều tùy chọn

Phần kết luận

Trong bài viết này, chúng ta đã thấy cách tạo ảnh chụp màn hình trang web trong nút. js bằng nhiều công cụ khác nhau

Chúng tôi khuyên bạn nên sử dụng nghệ sĩ múa rối hoặc nhà viết kịch để chụp ảnh màn hình trang web vì cả hai đều được hỗ trợ tốt và cung cấp cho bạn khả năng sử dụng các trình duyệt mới nhất

Electron có thể được sử dụng nhưng nó chủ yếu là một nền tảng phát triển để xây dựng các ứng dụng máy tính để bàn đa nền tảng và do đó, việc sử dụng nó để chụp ảnh màn hình có thể cảm thấy khá rắc rối và không phải là trường hợp sử dụng chính

cơn ác mộng. js và Phantom. js không còn được duy trì và do đó không được khuyến nghị

Nếu bạn muốn nhanh chóng thêm ảnh chụp màn hình trang web hoặc tệp PDF vào dự án của mình mà không gặp rắc rối khi duy trì dịch vụ ảnh chụp màn hình của riêng mình và phải xử lý tất cả các trường hợp cạnh đi kèm với điều đó, chúng tôi khuyên bạn nên sử dụng API ảnh chụp màn hình chẳng hạn như urlbox

Có lẽ bạn đã dành nhiều giờ thất vọng để duy trì một vi dịch vụ ảnh chụp màn hình liên tục bị hỏng - hết bộ nhớ hoặc tạo ảnh chụp màn hình không chính xác?

JavaScript có thể phát hiện ảnh chụp màn hình không?

Chúng tôi có thể tự động chụp ảnh màn hình không?

3 cách để chụp ảnh màn hình là gì?

Làm cách nào để chụp ảnh màn hình video trong JavaScript?