vue-cli-plugin-prtscr

screenshot

vue-cli 插件，用于在开发环境截图。

特点

基于 puppeteer 的截图方案，任何形式的内容都可以截取，视频，webgl 统统可以完成截图。

截图规则

每 30 分钟或者 compile 100 次截取所有路由一次。

使用方法

npm install vue-cli-plugin-prtscr -D

vue-cli 配置

注意 该配置可以通过/take接口传递的参数覆盖

pluginOptions: {
  screen: {
    width: 1920,
    height: 1080,
    dpr: 1,
    quality: [0.3, 0.6],
    router: {
      mode: 'hash', // hash/history
      routes: ['/', '/info']  // 当前项目路由
    },
    projectId: 'aaabbbcccddd',
    localImg: {
      path: 'public/img/',
      quality: 40,
      name: 'preview.jpg' // .jpg/.jpeg/.png
    },
    localImgPath: 'public/img/preview.jpg',
    localImgQuality: 40,
    TIME_DIFF: 30 * 60 * 1000,
    MAX_CHANGE_TIMES: 100,
    finish: 'pageTlEnd' // default 'pageTlEnd'
  }
}

前置条件

1. 项目初始化完成后需要调用/take接口，通过 post 方法传递如下参数:

{
  width: 1920,
  height: 1080,
  projectId: 'aaabbbcccddd',
  router: {
    mode: 'hash',
    routes: ['/', '/info']
  }
},

2. 在项目动画线结束的时候调用window._onAppReady方法，或者触发自定义事件app-ready

const myEvent = new CustomEvent('app-ready', {
    detail: null
  })
window.dispatchEvent(myEvent)

3. 要实现window.app._screenshot_upload方法

window.app = {
  _screenshot_upload() {
    return axios.post(
      '/upload',
      {},
      {
        headers: {
          Authorization: 'yourtoken',
          Time: new Date().getTime(),
          GA: 'ga Info',
          ...
        }
      }
    )
  }
}