开发微信小程序时需要生成精美的图片便于用户分享到朋友圈,而微信的canvas接口对于文字排版非常简陋,很难做到文字的对齐和换行,在有大量文字的情况下特别麻烦,特别是不定长度的内容,很难计算图片的实际高度。如果能像网页一样自动流式布局拓展高度就好了。

有没有将网页转换为图片的方法?这样可以开发一个手机端网页生成要分享的内容,在服务器将网页截图,下载到客户端就可以了。考察了多个方案,觉得Browserlesss 实现的截图API非常不错,支持Docker部署,简单到发送一个POST请求就可以将带有JavaScript的网页完整截取下来。

比如对Bing首页进行截图,截取iPhone 6的宽高375x667,dpr为2,代码如下:

curl -X POST \
https://chrome.browserless.io/screenshot \
-H 'Cache-Control: no-cache' \
-H 'Content-Type: application/json' \
--output screenshot.jpg \
-d '{
  "url": "https://cn.bing.com",
  "setExtraHTTPHeaders": {
    "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
  },
  "viewport": {
    "width": 375,
    "height": 667,
    "deviceScaleFactor": 2
  },
  "options": {
    "fullPage": true,
    "type": "jpeg",
    "quality": 75
  },
  "gotoOptions": {
    "waitUntil": "networkidle2"
  }
}'

内容保存为screenshot.jpg,实际分辨率为750x1334,完美适配高分屏,不会导致模糊。由于是使用完整的浏览器进行图像的截取,所有JavaScript代码都能执行,对SPA应用截图也没有问题。

本地部署

browserless是基于https://github.com/GoogleChrome/puppeteer开发的,开放了几个REST接口,并支持Docker的部署https://docs.browserless.io/docs/docker-quickstart.html。实际使用很简单:

docker pull browserless/chrome:latest
docker run \
-d \
-p 3000:3000 \
--shm-size 2gb \
--name browserless \
--restart always \
-e "DEBUG=browserless/chrome" \
-e "MAX_CONCURRENT_SESSIONS=10" \
browserless/chrome:latest

这样就可以将https://chrome.browserless.io/screenshot 替换为http://localhost:3000/screenshot,进行本地化的图片生成。甚至使用puppeteer开发自定义应用https://docs.browserless.io/docs/start.html#3-update-your-app-to-use-browserless

总的来说,browserless就是puppeteer简单的包装,提供一些开箱即用的API和云服务,如果进行深度的开发可以直接使用puppeteer,Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库,直接在服务器安装Puppeteer可能遇到很多依赖问题,所以推荐使用browserless配合browserless打包的Docker镜像

原文链接:https://marskid.net/2019/06/09/browserless-screenshot/