返回

1. 海报生成服务概述

前端

拉新活动必备——利用node + fc 部署海报生成服务

文章目录

  1. 海报生成服务概述
  2. 使用 Node.js 开发海报生成服务
  3. 使用 FC 部署海报生成服务
  4. 如何使用海报生成服务
  5. 结语

拉新和分享活动中离不开海报的使用。考虑到生成海报属于通用工具，并且需要处理前端生成海报的兼容性问题，我们在项目中开发了此服务。本服务基于 Node.js 和阿里云函数计算开发，可以方便快捷地生成海报。


首先，需要安装必要的 Node.js 模块。可以使用以下命令安装：

npm install --save sharp
npm install --save gm

然后，创建海报生成服务。海报生成服务是一个简单的 Node.js 脚本，可以接受一个 JSON 对象作为输入，并返回一个 PNG 图像。JSON 对象包含要生成的海报的详细信息，例如海报的尺寸、背景颜色、文字内容、图片等。

海报生成服务脚本如下：

const sharp = require('sharp');
const gm = require('gm').subClass({imageMagick: true});

exports.handler = async (event, context) => {
  // 解析 JSON 请求体
  const data = JSON.parse(event.body);

  // 创建海报
  const poster = sharp(data.width, data.height, {
    background: data.backgroundColor,
  });

  // 添加文字
  for (const text of data.texts) {
    poster.composite([{
      input: text.content,
      top: text.top,
      left: text.left,
      gravity: 'center',
    }]);
  }

  // 添加图片
  for (const image of data.images) {
    poster.composite([{
      input: image.path,
      top: image.top,
      left: image.left,
      gravity: 'center',
    }]);
  }

  // 返回海报
  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/png',
    },
    body: await poster.toBuffer(),
  };
};

接下来，需要将海报生成服务部署到阿里云函数计算。可以按照以下步骤进行部署：

  1. 登录阿里云函数计算控制台。
  2. 单击“创建函数”。
  3. 选择“自定义函数”。
  4. 填写函数名称、运行时、代码入口文件、代码等信息。
  5. 单击“创建”。

海报生成服务可以通过HTTP请求来调用。请求体是一个 JSON 对象，包含要生成的海报的详细信息。海报生成服务会返回一个 PNG 图像。

可以编写一个简单的 HTML 页面来使用海报生成服务。HTML 页面如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <form action="/poster" method="POST">
    <label for="width">宽度:</label>
    <input type="number" id="width" name="width" value="600">
    <label for="height">高度:</label>
    <input type="number" id="height" name="height" value="300">
    <label for="backgroundColor">背景颜色:</label>
    <input type="color" id="backgroundColor" name="backgroundColor" value="#ffffff">
    <label for="texts[]">文字内容:</label>
    <input type="text" id="texts[]" name="texts[]" value="欢迎参加活动">
    <input type="text" id="texts[]" name="texts[]" value="时间: 2023年3月8日">
    <input type="text" id="texts[]" name="texts[]" value="地点: 北京市海淀区">
    <label for="images[]">图片:</label>
    <input type="file" id="images[]" name="images[]" multiple>
    <input type="submit" value="生成海报">
  </form>
</body>
</html>

海报生成服务是一个简单易用的工具，可以方便快捷地生成海报。本服务基于 Node.js 和阿里云函数计算开发，可以轻松部署和使用。