Hướng dẫn node js puppeteer html to image - node js puppeteer html sang hình ảnh

bởi Ryan Glover

Bắt đầu

Đối với hướng dẫn này, chúng tôi sẽ sử dụng SOULERPLATION Node.js Cheatcode Node.js làm điểm bắt đầu. Điều này sẽ cung cấp cho chúng tôi một nền tảng vững chắc để xây dựng mà không cần nhiều mã tùy chỉnh.

Để bắt đầu, nhân bản Boilerplate từ GitHub:

git clone https://github.com/cheatcode/nodejs-server-boilerplate.git

Và sau đó,

cd nodejs-server-boilerplate && npm install

8 vào thư mục và cài đặt các phụ thuộc:

cd nodejs-server-boilerplate && npm install

Tiếp theo, cài đặt gói

cd nodejs-server-boilerplate && npm install

9:

npm i puppeteer

Cuối cùng, một khi tất cả các phụ thuộc được cài đặt, hãy khởi động máy chủ với:

npm run dev

Với tất cả những điều này hoàn tất, bước đầu tiên của chúng tôi sẽ là thiết lập một tuyến đường nơi chúng tôi sẽ hiển thị hình ảnh của chúng tôi để thử nghiệm.

Thêm một tuyến đường trên máy chủ để thử nghiệm

Bên trong dự án nhân bản, hãy mở tệp

npm i puppeteer

0 từ gốc của dự án:

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

Ở đây,

npm i puppeteer

1 đại diện cho phiên bản ứng dụng Express.js được thiết lập cho chúng tôi trong bản sao trong

npm i puppeteer

2. Chúng tôi sẽ sử dụng điều này để tạo tuyến đường thử nghiệm của chúng tôi:

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

Dễ như ăn bánh. Để kiểm tra nó, với máy chủ của bạn đang chạy, hãy mở trình duyệt của bạn và hướng tới

npm i puppeteer

3 và bạn sẽ thấy "Kiểm tra 123" được hiển thị.

Dây máy tạo hình ảnh bằng cách sử dụng puppeteer

Tiếp theo, chúng ta cần nối dây tạo hình ảnh của chúng ta. Để làm điều đó, chúng tôi sẽ tạo một mô -đun riêng mà chúng tôi có thể nhập bất cứ nơi nào chúng tôi muốn chuyển đổi HTML thành một hình ảnh trong ứng dụng của chúng tôi:

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

Để bắt đầu, chúng tôi nhập

cd nodejs-server-boilerplate && npm install

9 từ gói chúng tôi đã cài đặt trước đó. Tiếp theo, chúng tôi thiết lập chức năng

npm i puppeteer

5 của mình, lấy một chuỗi

npm i puppeteer

6 duy nhất làm đối số.

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

Đầu tiên, chúng ta cần tạo một thể hiện múa rối. Để làm điều đó, chúng tôi sử dụng

npm i puppeteer

7. Lưu ý rằng ở đây, chúng tôi đang sử dụng cú pháp Async/Await của JavaScript vì chúng tôi hy vọng

npm i puppeteer

7 sẽ trả lại cho chúng tôi một lời hứa. Bằng cách sử dụng từ khóa

npm i puppeteer

9 ở đây, chúng tôi sẽ nói với JavaScript và bằng cách mở rộng, Node.js, để đợi cho đến khi nhận được phản hồi từ

npm i puppeteer

7.

Tiếp theo, với

npm run dev

1 của chúng tôi được tạo, chúng tôi tạo

npm run dev

2 với

npm run dev

3 (nghĩ về điều này giống như mở một tab trong trình duyệt của riêng bạn, nhưng ở trạng thái "không đầu", có nghĩa là không có giao diện người dùng nào chỉ tồn tại trong bộ nhớ). Một lần nữa, chúng tôi dự đoán một lời hứa sẽ được trả lại, vì vậy chúng tôi ____29 cuộc gọi này trước khi tiếp tục.

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

Tiếp theo, chúng tôi đi vào phần quan trọng. Ở đây, sử dụng

npm run dev

5, chúng tôi bảo Puppeteer để điền vào trang trình duyệt với chuỗi

npm i puppeteer

6 mà chúng tôi đã chuyển vào chức năng của mình như một đối số. Điều này tương đương với bạn đang tải một trang web trong trình duyệt của bạn và HTML từ phản hồi của máy chủ được tải vào bộ nhớ.

Tiếp theo, chúng tôi sử dụng API DOM (mô hình đối tượng tài liệu) tích hợp của Puppeteer để truy cập HTML của trình duyệt trong bộ nhớ. Ở đây, trong biến

npm run dev

7 của chúng tôi, chúng tôi lưu trữ kết quả của việc gọi

npm run dev

8. Những gì nó đang làm là lấy phiên bản kết xuất trong bộ nhớ của HTML của chúng tôi và trích xuất các ____37 của thẻ

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

0 (HTML được hiển thị của chúng tôi).

Đáp lại, chúng tôi lấy lại một nghệ sĩ múa rối

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

1, đó là cách nói "yếu tố như nó được thể hiện trong bộ nhớ của Puppeteer," hoặc, HTML được hiển thị của chúng tôi như một đối tượng thân thiện với người đi múa rối.

Tiếp theo, sử dụng

npm run dev

7 đó, chúng tôi sử dụng phương pháp Puppeteer

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

3 để chụp ảnh màn hình của trang HTML được hiển thị trong bộ nhớ của chúng tôi. Để kiểm soát hoàn toàn những gì được hiển thị trong hình ảnh của chúng tôi, chúng tôi chuyển

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

4 đến

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

5 để đảm bảo chúng tôi làm cho nền trang hoàn toàn minh bạch.

Đáp lại, chúng tôi hy vọng sẽ lấy lại

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

6. Đây là nội dung tệp hình ảnh thô, nhưng không phải là hình ảnh thực tế (có nghĩa là bạn sẽ thấy một loạt dữ liệu nhị phân ngẫu nhiên, không phải là hình ảnh). Trước khi chúng ta thấy làm thế nào để có được hình ảnh thực tế của mình, chúng ta cần phải làm sạch một số:

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

Ở đây, chúng tôi đã thêm hai cuộc gọi:

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

7 và

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

8. Có thể dự đoán, chúng đóng trang (hoặc tab trình duyệt) mà chúng tôi đã mở trong bộ nhớ cũng như trình duyệt. Điều này rất quan trọng để thực hiện bởi vì nếu cuối cùng bạn không để các trình duyệt không được xử lý trong bộ nhớ làm cạn kiệt tài nguyên của máy chủ của bạn (và có thể gây ra sự cố tiềm năng do tràn bộ nhớ).This is very important to do because if you don't you end up leaving unclosed browsers in memory which depletes your server's resources (and can cause a potential crash due to memory overflow).

Cuối cùng, chúng tôi trả lại

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

6 được truy xuất từ ​​chức năng.

Hiển thị hình ảnh trên tuyến đường của chúng tôi

Thêm một bước. Về mặt kỹ thuật, tại thời điểm này, chúng tôi đã không chuyển bất kỳ HTML nào cho chức năng của mình. Hãy nhập

npm i puppeteer

5 trở lại vào tệp

npm i puppeteer

0 của chúng tôi và gọi nó từ tuyến đường của chúng tôi:

cd nodejs-server-boilerplate && npm install

0

Ở đây, chúng tôi đã nhập chức năng

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

2 của chúng tôi từ

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

3. Trên cuộc gọi lại cho tuyến đường của chúng tôi, chúng tôi đã thêm cờ

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

4 bởi vì, bây giờ, chúng tôi đang sử dụng từ khóa

npm i puppeteer

9 trước hàm

npm i puppeteer

5 của chúng tôi. Hãy nhớ rằng, điều này là cần thiết bởi vì chúng ta cần phải chờ đợi Puppeteer để thực hiện công việc của mình trước khi chúng ta có thể dựa vào nó trả lại dữ liệu cho chúng ta.

Ngoài cuộc gọi của chúng tôi, chúng tôi cũng đã sửa đổi cách chúng tôi trả lời yêu cầu tuyến đường. Tại đây, chúng tôi đã thêm một cuộc gọi đến

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

7, đặt tiêu đề

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

8 thành

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

9. Hãy nhớ làm thế nào chúng tôi đã đề cập rằng

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

6 mà chúng tôi đã nhận được từ

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

1 về mặt kỹ thuật chưa phải là một hình ảnh? Đây là những gì thay đổi mà. Ở đây,

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

9 được gọi là loại MIME; Một kiểu dữ liệu được công nhận bởi các trình duyệt nói rằng "dữ liệu thô tôi cung cấp cho bạn nên được hiển thị là ___." Trong trường hợp này, chúng tôi đang nói "hiển thị dữ liệu thô này dưới dạng hình ảnh .png."

Cuối cùng, là cơ quan phản hồi cho yêu cầu của chúng tôi, chúng tôi chuyển

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

6 đến

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

4. Với điều này, bây giờ, hãy thêm một số HTML vào hỗn hợp và sau đó cho thử nghiệm này:

cd nodejs-server-boilerplate && npm install

1

Ở đây, chúng tôi sẽ chuyển một chuỗi JavaScript đơn giản chứa một số HTML. Chúng tôi đã thiết lập một nồi hơi HTML cơ bản bao gồm thẻ

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

5 được điền với thẻ

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

6 và thẻ

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

0. Trong thẻ

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

6, chúng tôi đã thêm thẻ

import puppeteer from "puppeteer";

export default async (html = "") => {
 // We'll handle our image generation here.
};

9 chứa một số CSS để tạo kiểu cho nội dung HTML của chúng tôi.

Trong

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

0, chúng tôi đã thêm một số thẻ HTML đơn giản:

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

1 được điền với thẻ

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

2. Bây giờ, nếu chúng ta quay trở lại tuyến thử nghiệm của mình tại

npm i puppeteer

3 và bạn sẽ thấy một cái gì đó như thế này:

Hình ảnh của chúng tôi hiển thị trong trình duyệt. Nhấp chuột phải và lưu như để tải nó vào máy tính của bạn.

Tuyệt, phải không? Nếu bạn nhấp chuột phải vào hình ảnh và tải xuống, bạn sẽ có thể mở nó trên máy tính của bạn như bất kỳ hình ảnh nào khác.

Trước khi chúng tôi kết thúc, thật tốt khi hiểu cách lưu trữ dữ liệu này vĩnh viễn thay vì chỉ hiển thị nó trong trình duyệt và tải xuống bằng tay. Tiếp theo, chúng ta sẽ xem xét hai phương pháp: lưu hình ảnh được tạo vào đĩa và lưu hình ảnh được tạo cho Amazon S3.

Viết hình ảnh được tạo thành đĩa

May mắn thay, viết tập tin của chúng tôi vào đĩa khá đơn giản. Chúng ta hãy sửa đổi một chút cho tuyến đường của chúng tôi (chúng tôi vẫn sẽ sử dụng URL trong trình duyệt để "kích hoạt" thế hệ):

cd nodejs-server-boilerplate && npm install

2

Khá đơn giản. Ở đây, tất cả những gì chúng tôi đã thực hiện là được nhập

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

4 (hệ thống tệp trong node.js, ____________ 74 không cần phải cài đặt), sau đó thêm một cuộc gọi đến

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

6, chuyển đường dẫn mà chúng tôi muốn tệp của chúng tôi được lưu trữ (trong đó trường hợp, trong một tệp có tên

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

7 tại gốc của dự án của chúng tôi) và dữ liệu cho tệp.

Lưu ý, lưu ý rằng đối với phần mở rộng tệp, chúng tôi đã đặt rõ ràng

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

9. Tương tự như những gì chúng tôi đã thấy hiển thị hình ảnh của chúng tôi trực tiếp đến tuyến đường của chúng tôi, rằng

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

9 truyền lại cho máy tính rằng nội dung của tệp này đại diện cho một hình ảnh ở định dạng

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
};

9.

Bây giờ, khi chúng tôi truy cập tuyến đường của chúng tôi, tệp của chúng tôi sẽ được ghi vào

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

1 trên đĩa cũng như được hiển thị trong trình duyệt.

Gửi hình ảnh được tạo đến Amazon S3

Trước khi chúng ta đi xa hơn, để truy cập Amazon S3, chúng ta cần thêm một phụ thuộc mới:

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

2. Hãy cài đặt nó ngay bây giờ:

cd nodejs-server-boilerplate && npm install

3

Tiếp theo, mặc dù tương tự, gửi hình ảnh được tạo của chúng tôi đến Amazon S3 phức tạp hơn một chút. Để làm điều đó, chúng tôi sẽ tạo một tệp mới tại

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

3 để thực hiện một số mã để giúp chúng tôi kết nối với Amazon S3 và viết tệp của chúng tôi (được gọi là "đặt một đối tượng vào thùng").

cd nodejs-server-boilerplate && npm install

4

Ở đây, chúng tôi nhập

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

4 từ

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

2 chúng tôi vừa cài đặt. Tiếp theo, chúng tôi đặt

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

6 bằng với một ví dụ mới là

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

7 (lưu ý sự khác biệt giữa các tên là vốn "C"), được thông qua thông tin mà chúng tôi muốn sử dụng để giao tiếp với AWS.

Nếu bạn chưa có thông tin cần thiết, bạn sẽ muốn đọc hướng dẫn này bởi Amazon về cách tạo người dùng mới. Đối với ví dụ này, khi tạo người dùng của bạn, hãy đảm bảo bật "Truy cập chương trình" ở Bước một và đính kèm chính sách

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

8 theo "Đính kèm trực tiếp các chính sách hiện có" trong bước hai.

Khi bạn đã tạo ID khóa truy cập và khóa truy cập bí mật của bạn, bạn có thể điền vào các trường ở trên.

Cảnh báo công bằng: Không cam kết các chìa khóa này cho một repo GitHub công khai. Có những bot trên GitHub quét các phím AWS không được bảo vệ và sử dụng chúng để quay các trang trại bot và thực hiện hoạt động bất hợp pháp (trong khi làm cho bạn chân hóa đơn).

Đối với

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

9, bạn sẽ muốn chỉ định khu vực bạn tạo xô Amazon S3 của mình. Vùng là vị trí địa lý của thùng của bạn trên Internet. Nếu bạn chưa tạo ra một cái xô, bạn sẽ muốn đọc hướng dẫn này của Amazon về cách tạo một thùng mới.

Khi thiết lập xô của bạn, cho hướng dẫn này, hãy đảm bảo bỏ chọn "Chặn truy cập công cộng". Đây là một khung cảnh tốt cho môi trường sản xuất, nhưng vì chúng tôi chỉ chơi xung quanh, nên không kiểm tra nó là an toàn. Cảnh báo công bằng: Không lưu trữ bất kỳ dữ liệu nhạy cảm nào trong thùng này.Fair Warning: DO NOT store any sensitive data in this bucket.

cd nodejs-server-boilerplate && npm install

5

Khi chúng tôi đã định cấu hình Vùng người dùng và nhóm AWS IAM của chúng tôi, tiếp theo, chúng tôi muốn tạo một thể hiện là

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

0 bằng cách gọi đến

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

1.

Suy nghĩ trước, chúng tôi muốn dự đoán sự cần thiết của các phương thức S3 khác sau này, vì vậy thay vì chỉ xuất một hàm duy nhất từ ​​tệp của chúng tôi, ở đây, chúng tôi xuất một đối tượng bằng phương thức

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

2.

Đối với phương thức đó (tên cho một hàm được xác định là một phần của đối tượng), chúng tôi dự đoán một đối tượng

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

3 sẽ được truyền chứa dữ liệu và hướng dẫn về cách xử lý tệp của chúng tôi. Trong phần thân của chức năng này, chúng tôi trả lại một lời hứa để chúng tôi có thể kết thúc phương thức

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

4 không đồng bộ từ gói

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

2.

Khi chúng tôi gọi phương thức đó, chúng tôi sẽ chuyển các tùy chọn theo tài liệu SDK của Amazon S3, mô tả tệp của chúng tôi, nơi chúng tôi muốn nó sống và các quyền liên kết với nó. Trong phương thức gọi lại cho

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

4, giả sử chúng tôi không gặp lỗi, chúng tôi xây dựng một đối tượng mô tả vị trí của tệp mới của chúng tôi trên Amazon S3 và

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

7 Lời hứa mà chúng tôi đã trả lại từ hàm.

cd nodejs-server-boilerplate && npm install

6

Trở lại trong tệp

npm i puppeteer

0 của chúng tôi, bây giờ chúng tôi đã sẵn sàng tải lên S3. Sửa đổi mã của chúng tôi từ trước đó một chút, chúng tôi nhập tệp

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

0 của chúng tôi từ

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });
};

3 ở trên cùng và sau đó trong phần thân của cuộc gọi lại của tuyến đường, chúng tôi thêm cuộc gọi của chúng tôi vào

import puppeteer from "puppeteer";

export default async (html = "") => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setContent(html);

  const content = await page.$("body");
  const imageBuffer = await content.screenshot({ omitBackground: true });

  await page.close();
  await browser.close();

  return imageBuffer;
};

4, chuyển trong

cd nodejs-server-boilerplate && npm install

02 Chúng tôi muốn tệp của chúng tôi được lưu trữ,

cd nodejs-server-boilerplate && npm install

03 ( Tên đường dẫn và tên tệp liên quan đến gốc của nhóm của chúng tôi) cho tệp của chúng tôi,

cd nodejs-server-boilerplate && npm install

04 (dữ liệu RAW

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  // We'll add our test route here.
};

6) và

cd nodejs-server-boilerplate && npm install

06 (cùng loại

import graphql from "./graphql/server";

export default (app) => {
  graphql(app);

  app.use("/graphic", (req, res) => {
    res.send("Testing 123");
  });
};

9 mà chúng tôi đã thảo luận trước đó).

Cuối cùng, chúng tôi đảm bảo

npm i puppeteer

9 cuộc gọi của chúng tôi đến S3 để đảm bảo rằng chúng tôi lấy lại tệp của mình. Trong ứng dụng của riêng bạn, điều này có thể không cần thiết nếu bạn ổn với tệp được tải lên trong nền.

Đó là nó! Bây giờ, nếu chúng tôi truy cập

npm i puppeteer

3 trong ứng dụng của mình, chúng tôi sẽ thấy đồ họa được tải lên Amazon S3, sau đó là xác nhận được đăng xuất trong thiết bị đầu cuối:

cd nodejs-server-boilerplate && npm install

7

Gói lên

Trong hướng dẫn này, chúng tôi đã học cách tạo hình ảnh từ HTML và CSS bằng cách sử dụng Puppeteer. Chúng tôi đã học được cách quay một trình duyệt trong bộ nhớ, vượt qua một số HTML, và sau đó chụp ảnh màn hình của trang được hiển thị bằng cách sử dụng Puppeteer. Chúng tôi cũng đã học được cách trả lại hình ảnh của mình cho trình duyệt trực tiếp cũng như cách lưu trữ tệp đó trên đĩa bằng hệ thống tệp Node.js và tải hình ảnh của chúng tôi lên Amazon S3 bằng cách sử dụng SDK AWS JavaScript.

Làm thế nào để bạn tạo ra một bức tranh từ một nghệ sĩ múa rối?

Làm cách nào để hiển thị hình ảnh trong Node JS?

Làm thế nào để bạn biến một chú chó con thành PDF?

Node JS có tốt cho xử lý hình ảnh không?