解决方案
2020-09-13 本文已影响0人
Lee弟弟
输入url返回页面截图接口
方案1⃣️ :phantomjs 提供一个浏览器环境的命令行接口,你可以把它看作一个“虚拟浏览器”,除了不能浏览,其他与正常浏览器一样。它的内核是WebKit引擎,不提供图形界面。
方案2⃣️ :puppeteer (Google 团队官方)🙆♂️,在服务端启动一个Chrome/Chromium浏览器,然后在Chrome浏览器中执行快照操作。
方案3⃣️ :html-pdf的这一个nodejs库:🙅♂️
1.将请求参数套进一个html模版~~
2.执行这个库来生成pdf,png,jpeg等格式的文件储存在服务器,
3.将文件的http链接返回给前端~~
方案3⃣️ 跟这次需求不太切合,所以率先排除掉~
方案1⃣️ 跟方案2⃣️ 对比:
puppeteer 是 phantomjs 的升级版,由于 puppeteer 的出现,已停止更新。puppeteer 不仅完美覆盖phantomjs 优点,还支持等待页面加载,和拥有更自由的截图方式,而且它依赖 node 环境,与 node
天然契合,所以选用 puppeteer。
服务形式:
1、先把 截图 存在服务器然后将文件的 http 连接返回给浏览器(纯接口)。
2、直接将截图塞进 html 里返回给浏览器,在浏览器里新建一个窗口下载文件。
3、直接在 node 服务页面模板里调用方法,直接将截图返回到模板上。
优先实现:1、3
接口文档
snapshot/getPageScreenshot
入参:
{
pageUrl: string, // 网页url
imgType?: string, // 图片类型:jpeg 或 png 默认 ‘png’
fullPage?: boolean, // 是否截图完整页面(需要滚动的部分也包含在内)默认
// imgWidth?: number, // 裁剪的宽度,单位 px
// imgHeight?: number, // 裁剪的高度,单位 px
// imgName?: string, // 截图名字,默认随机字符串
false,为 true 时优先级比 imgWidth 和 imgHeight 高
}
出参:
{
res: { // 接口返回内容
imageUrl?: string, // 成功时返回图片URL
error_message?: string, // 失败时的错误信息
}
rtn_code: number, // 状态码
rtn_message: string, // 接口返回处理信息
}