Webrender：修订间差异

2024年3月6日 (三) 15:51的最新版本

Webrender 为小可的外置服务，主要用于处理 Wiki infobox 图片渲染、 html 渲染以及部分功能的访问代理。

此服务使用 JavaScript 编写，并由 Puppeteer 驱动，因此需要安装 Node.js 环境，以及安装 Chromium 内核浏览器。

部署

请前往此处下载源文件，并在终端内安装依赖。

$ npm install

前往此处下载任意版本 Chromium，或前往 Chromium 官方网站下载。

于 package.json 同级目录中，中新建 .env 文件，并填写以下字段：

CHROMIUM_PATH = # Chromium 可执行文件位置
FC_SERVER_PORT = 15551 # API 监听端口

使用 node 运行 ./src/index.js 来开启服务。

$ node ./src/index.js

API 监听端口默认位于 15551，可自行选择配置代理。

请在配置文件中 web_render 配置项填写访问地址，如http://127.0.0.1:15551。

用法

以下为 Webrender API 的用法。

`/`

POST

此 API 可以生成网页内容截图。

请求参数

content：要加载到页面的 HTML 内容。
width（可选）：截图的宽度，默认 500px。
height（可选）：截图的高度，默认 1000px。
mw（可选）：是否仅截取主要内容。
tracing（可选）：是否启用页面追踪，默认 False。

响应

成功：返回生成的 JPEG 格式页面截图。
失败：返回 500 错误。

`/element_screenshot`

POST

此 API 可以生成指定元素的网页内容截图。

请求参数

element：指定要截图的元素的 CSS 选择器，可以是单个字符串或字符串数组。
content（可选）：要加载到页面的 HTML 内容。
url（可选）：要加载的页面的 URL。
css（可选）：要应用于页面的自定义 CSS 样式。
width（可选）：截图的宽度，默认 720px。
height（可选）：截图的高度，默认 1280px。
counttime（可选）：是否在截图中添加计时框，默认 True。
tracing（可选）：是否启用页面追踪，默认 False。

响应

成功：返回生成的 JPEG 格式页面截图。
失败：返回 500 错误。

`/section_screenshot`

POST

此 API 可以生成网页中特定区域的内容截图。

请求参数

section：要截取的区域的 HTML 元素的 ID。
content（可选）：要加载到页面的 HTML 内容。
url（可选）：要加载的页面的 URL。
css（可选）：要应用于页面的自定义 CSS 样式。
width（可选）：截图的宽度，默认 720px。
height（可选）：截图的高度，默认 1280px。
counttime（可选）：是否在截图中添加计时框，默认 True。
tracing（可选）：是否启用页面追踪，默认 False。

响应

成功：返回生成的 JPEG 格式页面截图。
失败：返回 500 错误。

`/page`

POST

此 API 可以生成指定 URL 页面的截图。

请求参数

url：要加载的页面的 URL。
css（可选）：要应用于页面的自定义 CSS 样式。

响应

成功：返回生成的 JPEG 格式页面截图。
失败：返回 500 错误。

`/source`

GET

此 API 可以获取网页源代码。

请求参数

url：要加载的页面的 URL。

响应

成功：返回请求的网页内容。
失败：返回 500 错误。

@@ 第1行： / 第1行： @@
-{{DISPLAYTITLE:infobox_render}}
+Webrender 为小可的外置服务，主要用于处理 Wiki infobox 图片渲染、 html 渲染以及部分功能的访问代理。
-  本文假定您有基础 Node.js  操作技能 。 配置过程中需要 yarn 。
+  此服务使用 JavaScript 编写，并由 Puppeteer 驱动，因此需要安装 Node.js  环境，以及安装 Chromium 内核浏览器 。
+== 部署 ==
+请前往[https://github.com/Teahouse-Studios/oa-web-render 此处]下载源文件，并在终端内安装依赖 。
 <syntaxhighlight lang="bash">
-$ git clone https://github.com/Teahouse-Studios/oa-web-render
+$ npm install
-$ cd oa-web-render
-$ yarn install
-$ yarn build
 </syntaxhighlight>
- 前往 https://github.com/adieuadieu/serverless-chrome/releases 下载任意版本 Chromium （Linux） ，或前往 Chromium 官方 进行 下载。
+ 前往[https://github.com/adieuadieu/serverless-chrome/releases  此处] 下载任意版本 Chromium，或前往 Chromium 官方 网站 下载。
-  放置 于 某一位置 ， 配置好执行权限。
+ 于 <code>package.json</code> 同级目录中 ， 中新建 <code>.env</code> 文件，并填写以下字段：
-在上方clone的仓库目录中新建 <code>.env</code> 文件，内容如下：
+<pre>
-<syntaxhighlight lang="python3">
 CHROMIUM_PATH = # Chromium 可执行文件位置
-</syntaxhighlight>
+FC_SERVER_PORT = 15551 # API 监听端口
+</pre>
-  之后， 运行 <code>dist/index.js</code>。
+  使用 node  运行 <code>./src/index.js</code> 来开启服务 。
 <syntaxhighlight lang="bash">
-$ node dist/index.js
+$ node ./src/index.js
 </syntaxhighlight>
-API 监听端口位于 15551 。您 可自行选择配置代理。<code>infobox_render</code> 配置项 中 填写访问地址，如<code><nowiki>http://127.0.0.1:15551/</nowiki></code>。
+API 监听端口 默认 位于 15551 ， 可自行选择配置代理。
+请在[[配置文件]]中 <code>web_render</code> 配置项填写访问地址，如<code><nowiki>http://127.0.0.1:15551</nowiki></code>。
+== 用法 ==
+以下为 Webrender API 的用法。
+===<code>/</code>===
+{{Instructor|
+* {{Instructor method|POST}}
+}}
+此 API 可以生成网页内容截图。
+==== 请求参数 ====
+* {{Instructor param|content|str}}：要加载到页面的 HTML 内容。
+* {{Instructor param|width|int}}（可选）：截图的宽度，默认 500px。
+* {{Instructor param|height|int}}（可选）：截图的高度，默认 1000px。
+* {{Instructor param|mw|bool}}（可选）：是否仅截取主要内容。
+* {{Instructor param|tracing|bool}}（可选）：是否启用页面追踪，默认 False。
+==== 响应 ====
+* 成功：返回生成的 JPEG 格式页面截图。
+* 失败：返回 500 错误。
+===<code>/element_screenshot</code>===
+{{Instructor|
+* {{Instructor method|POST}}
+}}
+此 API 可以生成指定元素的网页内容截图。
+==== 请求参数 ====
+* <code>element</code>：指定要截图的元素的 CSS 选择器，可以是单个字符串或字符串数组。
+* {{Instructor param|content|str}}（可选）：要加载到页面的 HTML 内容。
+* {{Instructor param|url|str}}（可选）：要加载的页面的 URL。
+* {{Instructor param|css|str}}（可选）：要应用于页面的自定义 CSS 样式。
+* {{Instructor param|width|int}}（可选）：截图的宽度，默认 720px。
+* {{Instructor param|height|int}}（可选）：截图的高度，默认 1280px。
+* {{Instructor param|counttime|bool}}（可选）：是否在截图中添加计时框，默认 True。
+* {{Instructor param|tracing|bool}}（可选）：是否启用页面追踪，默认 False。
+==== 响应 ====
+* 成功：返回生成的 JPEG 格式页面截图。
+* 失败：返回 500 错误。
+===<code>/section_screenshot</code>===
+{{Instructor|
+* {{Instructor method|POST}}
+}}
+此 API 可以生成网页中特定区域的内容截图。
+==== 请求参数 ====
+* {{Instructor param|section|str}}：要截取的区域的 HTML 元素的 ID。
+* {{Instructor param|content|str}}（可选）：要加载到页面的 HTML 内容。
+* {{Instructor param|url|str}}（可选）：要加载的页面的 URL。
+* {{Instructor param|css|str}}（可选）：要应用于页面的自定义 CSS 样式。
+* {{Instructor param|width|int}}（可选）：截图的宽度，默认 720px。
+* {{Instructor param|height|int}}（可选）：截图的高度，默认 1280px。
+* {{Instructor param|counttime|bool}}（可选）：是否在截图中添加计时框，默认 True。
+* {{Instructor param|tracing|bool}}（可选）：是否启用页面追踪，默认 False。
+==== 响应 ====
+* 成功：返回生成的 JPEG 格式页面截图。
+* 失败：返回 500 错误。
+===<code>/page</code>===
+{{Instructor|
+* {{Instructor method|POST}}
+}}
+此 API 可以生成指定 URL 页面的截图。
+==== 请求参数 ====
+* {{Instructor param|url|str}}：要加载的页面的 URL。
+* {{Instructor param|css|str}}（可选）：要应用于页面的自定义 CSS 样式。
+==== 响应 ====
+* 成功：返回生成的 JPEG 格式页面截图。
+* 失败：返回 500 错误。
+===<code>/source</code>===
+{{Instructor|
+* {{Instructor method|GET}}
+}}
+此 API 可以获取网页源代码。
+==== 请求参数 ====
+* <code>url</code> ：要加载的页面的 URL。
+==== 响应 ====
+* 成功：返回请求的网页内容。
+* 失败：返回 500 错误 。
 [[Category:开发]]