数据推送上线 ，抢先体验，欢迎来用！ 支持钉钉！

const { registerFont } = require('canvas');
registerFont('./Sora-Bold.ttf', {
  family: 'Sora',
});
registerFont('./Microsoft YaHei.ttf', {
  family: 'Microsoft YaHei',
});

const Chart = require('chart.js/auto');
const colorLib = require('@kurkle/color');
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const { createCanvas, registerFont } = require('canvas');
// registerFont('./Sora-Bold.ttf', {
//   family: 'Sora',
// });
// 如有用到中文需要放入中文字体
// registerFont('./Microsoft YaHei.ttf', {
//   family: 'Microsoft YaHei',
// });
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.raw());
const port = 9000;
const tempPath = '/tmp';
async function saveChartImage(filePath, canvas) {
  return new Promise(async (resolve, reject) => {
    if (!fs.existsSync(tempPath)) {
      fs.mkdirSync(tempPath, { recursive: true });
    }
    const out = fs.createWriteStream(filePath);
    const stream = canvas.createPNGStream({
      compressionLevel: 9, // PNG employs a lossless compression algorithm
      resolution: 300,
    });
    stream.pipe(out);
    out.on('finish', () => {
      console.log(`[${Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}] The chart image was saved: ${filePath}`);
      resolve();
    });
    out.on('error', reject);
  });
}
const Utils = {
  transparentize(value, opacity) {
    var alpha = opacity === undefined ? 0.5 : 1 - opacity;
    return colorLib(value).alpha(alpha).rgbString();
  },
  CHART_COLORS: {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
  }
};
const getChartData = async ({
  part1Today,
  part1Yesterday,
  part2Today,
  part2Yesterday,
}) => {
  const data = [
    { date: 'yesterday', name: 'part1', value: part1Yesterday },
    { date: 'today', name: 'part1', value: part1Today },
    { date: 'yesterday', name: 'part2', value: part2Yesterday },
    { date: 'today', name: 'part2', value: part2Today },
  ];
  return (
    {
      labels: ['yesterday', 'today'],
      datasets: [
        {
          label: 'part1',
          data: data.filter((d) => d.name === 'part1').map(row => row.value),
          borderColor: Utils.CHART_COLORS.blue,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
        },
        {
          label: 'part2',
          data: data.filter((d) => d.name === 'part2').map(row => row.value),
          borderColor: Utils.CHART_COLORS.red,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
        }
      ]
    }
  );
};
// Bar Chart 的配置
const getChartConfigs = () => {
  return {
    type: 'bar',
    options: {
      responsive: true,
      plugins: {
        customCanvasBackgroundColor: {
          color: 'white',
        },
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart 展示'
        }
      }
    }
  };
};
app.get('/chart-api', async (req, res) => {
  const width = 300;
  const height = 200;
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext('2d');
  ctx.font = "43px Microsoft YaHei";
  // API 参数
  const part1Today = req.query['part1Today'];
  const part1Yesterday = req.query['part1Yesterday'];
  const part2Today = req.query['part2Today'];
  const part2Yesterday = req.query['part2Yesterday'];
  const data = await getChartData({
    part1Today,
    part1Yesterday,
    part2Today,
    part2Yesterday,
  });
  const chartConfig = {
    ...getChartConfigs(),
    data,
  };
  // 绘制图片
  await (async function () {
    new Chart(
      ctx,
      chartConfig,
    );
  })();
  const filePath = `${tempPath}/chart.png`;
  await saveChartImage(filePath, canvas);
  // 回送图表给请求方
  const contentType = 'image/png';
  // res.setStatusCode(200);
  res.setHeader('content-type', contentType);
  if (req.headers['Accept'] === '*/*' || req.headers['accept'] === '*/*') {
    res.send("success");
  } else {
    res.send(fs.readFileSync(filePath));
  }
});
app.listen(port, () => {
  console.log(`App listening on port ${port}`);
})
app.timeout = 0; // never timeout
app.keepAliveTimeout = 0; // keepalive, never timeout

const fs = require('fs');
const puppeteer = require('puppeteer');
function autoScroll(page) {
  return page.evaluate(() => {
    return new Promise((resolve, reject) => {
      var totalHeight = 0;
      var distance = 100;
      var timer = setInterval(() => {
        var scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    })
  });
}
module.exports.handler = function (request, response, context) {
  (async () => {
    const url = request?.query?.['url'] || request?.queries?.['url'];
    const key = (request?.query?.['key'] || request?.queries?.['key']) || 'default';
    const path = `/tmp/screenshot-${key}`;
    const contentType = 'image/png';
    const current = new Date();
    const screen = async (url) => {
      const browser = await puppeteer.launch({
        headless: true,
        args: [
          '--disable-gpu',
          '--disable-dev-shm-usage',
          '--disable-setuid-sandbox',
          '--no-first-run',
          '--no-zygote',
          '--no-sandbox',
          '--single-process'
        ]
      });
      if (!url.startsWith('https://') && !url.startsWith('http://')) {
        url = 'http://' + url;
      }
      const page = await browser.newPage();
      await page.emulateTimezone('Asia/Shanghai');
      await page.goto(url, {
        'waitUntil': 'networkidle2'
      });
      await page.setViewport({
        width: 800,
        height: 600
      });
      await autoScroll(page)
      await page.screenshot({ path: path, fullPage: true, type: 'png' });
      await browser.close();
      response.setStatusCode(200);
      response.setHeader('content-type', contentType);
      if (request.headers['Accept'] === '*/*' || request.headers['accept'] === '*/*') {
        response.send("success")
      } else {
        response.send(fs.readFileSync(path))
      }
    }
    if (url) {
      if (fs.existsSync(path)) {
        // exist
        const result = fs.statSync(path);
        // 透过图片创建的时间，来判断是否过期，内置为 1 天
        if (current.getTime() - result.ctimeMs < (1 * 24 * 60 * 60 * 1000)) {
          response.setStatusCode(200);
          response.setHeader('content-type', contentType);
          if (request.headers['Accept'] === '*/*' || request.headers['accept'] === '*/*') {
            response.send("success");
          } else {
            response.send(fs.readFileSync(path));
          }
          console.log('get from cache');
        } else {
          await screen(url);
        }
      } else {
        await screen(url);
      }
    } else {
      response.setStatusCode(404);
      response.send("failed");
    }
  })().catch(err => {
    response.setStatusCode(500);
    response.setHeader('content-type', 'text/plain');
    response.send(err.message);
  });
};