puppeteer-core 和 本地 chrome 截图

最近在做迁移旧项目的页面迁移，这个项目毕竟3年多了，早就没了原有的设计稿，里面的图文都是静态写死的，还是图文环绕这种定位实现的，不是一块块拼接起来的图片，而迁移到页面搭建后台需要的是一块块的组件，比如大图，一段文字。所以迁移工作如果按照这种方式去迁移，实在是无从下手，所以就有了这个想法：使用 puppeteer 来加快迁移的速度。

首先看原来的页面布局：

image.png

这中四面定位的布局，是没办法变成一块块，利用现有组件进行拼接的，而且里面的字体也可能是不同的机型，会有不同的字体展示，如果做到每个机型下面保持一致，同时能够加快我们的迁移速度，这是个需要思考的问题。

所以就想到利用 puppeteer 来截取网页的全屏图，然后使用 cdn 裁剪的能力将整张大图裁剪成小图，并将小图片下载到本地，在后台系统中上传形成页面。

利用 puppeteer 来截图全屏

puppeteer 很强大，也经常用来截图全部，但是具体使用 puppeteer 的坑还是不少的，因为网络的问题 puppeteer 经常很难下载，这不，我本地就不能下载chrome的模拟器，那就使用 puppeteer-core ，配置 本地的 chrome 浏览器来代替。
在配置的时候，因为默认的窗口口是800*600的，所以我们需要设置下默认配置，因为我们的设计稿都是375的像素，通常上传图片都3倍图，所以我这里就设置成打开3倍的宽度。

const puppeteer = require('puppeteer-core')

async function screenShot(url) {
// 启动浏览器
    const browser = await puppeteer.launch({
      headless: true,
      executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
      defaultViewport: { width: 1125, height: 1000 },
      args: [`--window-size=${1125}, 1000`]
    })
}

配置 executablePath 这个参数来使用本地的chrome 浏览器，可以打开 chrome://version/ 来查看本地的的可执行的 chrome 文件的路径：

还有个配置的默认窗口大小的坑点是设置 defaultViewport 这参数是没用的，所以需要加上 args: [--window-size=${1125}, 1000] 这个才起作用。

初始化之后，打开页面，动态获取页面的宽高，然后调用截图api，全屏截取：

    // 打开page
    const page = await browser.newPage()
    // 打开相应页面
    await page.goto(url)
    // 动态获取网页实际加载的宽高
    bodyWidth = await page.evaluate(() => document.body.scrollWidth);
    bodyHeight = await page.evaluate(() => document.body.scrollHeight);
    // 设置窗口大小
    await page.setViewport({ width: bodyWidth, height: bodyHeight });
    console.log('打开页面，开始截图', bodyWidth, bodyHeight)
    // 开始截图
    const targetDirectory = +new Date()
    await page.screenshot({
      path: `/Users/admin/code/your-project/images/${targetDirectory}.jpeg`,
      type: 'jpeg',
      quality: 100,
      fullPage: true,
    })
    // 关闭连接
    console.log('截图完毕，关闭连接')
    await page.close()

保存图片的路径可以本地先建立好，我这里就没动态去建立目录了。

裁剪图片

有些页面很长，截取的图片就比较大，在后台组件上传的时候，有大小限制，这样就需要将图片裁剪成多张小图，阿里云 cdn 本身也提供了这种能力，直接在原图后面拼接裁剪参数：?x-oss-process=image/crop,y_4000,h_2000/resize,w_1080
拼接完成之后将图片下载到本地：

const download = require('image-downloader')

function cutImages(bodyWidth, bodyHeight, cutSize, url) {
  const targetDirectory = '/Users/admin/code/your-project/images/2/'
  const cutCount = Math.floor(bodyHeight / cutSize)

  // 下载图片
  function downloadImgs(url, filepath) {
    download.image({
      url,
      dest: filepath,
    });
  }

  for (let i = 0; i < cutCount; i++) {
    // x-oss-process=image/crop,y_4000,h_2000/resize,w_1080
    let cutUrl = `${url}?x-oss-process=image/crop,y_${cutSize * i},h_${cutSize}/resize,w_${bodyWidth}`
    downloadImgs(cutUrl, `${targetDirectory}/${i}.jpeg`);
  }
}

图片的宽度和高度在截图的时候就已经打印了，

image.png

bodyWidth: 图片的宽度；
bodyHeight：图片的高度；
cutSize：每张要截取的高度，这里设置成1000，基本满足不超过120k；
最后调用cutImages(1125, 20323, 1000, 'https://cdn.poizon.com/node-common/b8d72699-b765-c9d2-cede-77b0704cc184-1125-20333.jpeg')
最后保存到本地的图片就是这样：

image.png

这里所有的需要保存的文件目录，就不自动创建了，手动创建就可以。

更多截图方式

不使用脚本截图，可以使用 chrome 自带的截图功能来实现：

截全屏的图片

1. cmd + shift + p 执行Command命令
2. 输入Capture full size screenshot 按下回车

截取部分元素的图片

1. 到 Elements 面板选中需要截取的元素部分
2. cmd + shift + p执行Command命令
3. 输入Capture node screenshot按下回车

这时截取额度图片会被直接下载到本地。