AI编程实战：从0基础到软件上架——基于腾讯云Serverless的全栈应用开发全记录

// imageProcessor.js
const sharp = require('sharp');
const { v4: uuidv4 } = require('uuid');

/**
 * 处理单张图片，生成三种缩略图 + 水印图
 * @param {Buffer} inputBuffer - 原始图片二进制
 * @param {string} watermarkText - 水印文字
 * @returns {Promise<Object>} 包含各尺寸Buffer及元数据
 */
async function processImage(inputBuffer, watermarkText) {
  const metadata = await sharp(inputBuffer).metadata();
  const baseName = uuidv4();

  // 1. 原始图转WebP（质量控制）
  const originalWebp = await sharp(inputBuffer)
    .webp({ quality: 85 })
    .toBuffer();

  // 2. 生成三种缩略图：小(200x200)、中(600x600)、大(1200x1200) 保持比例
  const sizes = [200, 600, 1200];
  const thumbnails = await Promise.all(sizes.map(async (size) => {
    const resized = await sharp(inputBuffer)
      .resize(size, size, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 75 })
      .toBuffer();
    return { size, buffer: resized };
  }));

  // 3. 水印叠加（右下角，边距10%）
  const svgWatermark = `
    <svg width="${metadata.width}" height="${metadata.height}">
      <rect x="0" y="0" width="100%" height="100%" fill="none" />
      <text x="${metadata.width * 0.9}" y="${metadata.height * 0.95}" 
            font-family="Arial" font-size="48" fill="rgba(255,255,255,0.6)" 
            text-anchor="end" transform="rotate(-15, ${metadata.width*0.9}, ${metadata.height*0.95})">
        ${watermarkText}
      </text>
    </svg>
  `;
  const watermarked = await sharp(inputBuffer)
    .composite([{ input: Buffer.from(svgWatermark), top: 0, left: 0 }])
    .webp({ quality: 85 })
    .toBuffer();

  return {
    original: originalWebp,
    thumbnails,
    watermarked,
    metadata: { width: metadata.width, height: metadata.height, format: metadata.format }
  };
}

module.exports = { processImage };

// index.js (SCF 入口)
const { processImage } = require('./imageProcessor');
const COS = require('cos-nodejs-sdk-v5');
const { Client } = require('pg');
const crypto = require('crypto');

// 初始化COS（环境变量注入）
const cos = new COS({
  SecretId: process.env.TENCENT_SECRET_ID,
  SecretKey: process.env.TENCENT_SECRET_KEY,
});

// PostgreSQL连接池（使用serverlessDB）
const pgClient = new Client({
  host: process.env.PGHOST,
  port: 5432,
  user: process.env.PGUSER,
  password: process.env.PGPASSWORD,
  database: process.env.PGDATABASE,
  ssl: { rejectUnauthorized: false }
});
pgClient.connect();

exports.main_handler = async (event, context) => {
  try {
    // 1. 解析API网关入参（支持multipart/form-data）
    const { fileBuffer, fileName, watermark } = parseEvent(event); // 自定义解析函数省略
    if (!fileBuffer) throw new Error('No image uploaded');

    // 2. 调用图像处理
    const result = await processImage(fileBuffer, watermark || 'AI Demo');

    // 3. 生成存储路径（按日期分桶）
    const datePrefix = new Date().toISOString().slice(0,10);
    const keyPrefix = `uploads/${datePrefix}/${crypto.randomBytes(4).toString('hex')}`;

    // 4. 并行上传至COS（原始图、水印图、三种缩略图）
    const uploadTasks = [
      cos.putObject({ Bucket: process.env.COS_BUCKET, Region: process.env.COS_REGION, Key: `${keyPrefix}/original.webp`, Body: result.original }),
      cos.putObject({ Bucket: process.env.COS_BUCKET, Region: process.env.COS_REGION, Key: `${keyPrefix}/watermarked.webp`, Body: result.watermarked }),
      ...result.thumbnails.map((t, i) => 
        cos.putObject({ Bucket: process.env.COS_BUCKET, Region: process.env.COS_REGION, Key: `${keyPrefix}/thumb_${[200,600,1200][i]}.webp`, Body: t.buffer })
      )
    ];
    const uploadResults = await Promise.all(uploadTasks);
    const urls = uploadResults.map(r => `https://${process.env.COS_BUCKET}.cos.${process.env.COS_REGION}.myqcloud.com/${r.Key}`);

    // 5. 元数据写入PostgreSQL（记录原始尺寸、各URL、处理时间）
    const insertQuery = `
      INSERT INTO image_records (original_name, original_width, original_height, format, 
                                 watermarked_url, thumb_200_url, thumb_600_url, thumb_1200_url, created_at)
      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, NOW())
      RETURNING id;
    `;
    const values = [
      fileName,
      result.metadata.width,
      result.metadata.height,
      result.metadata.format,
      urls[1], // watermarked
      urls[2], // thumb_200
      urls[3], // thumb_600
      urls[4]  // thumb_1200
    ];
    const { rows } = await pgClient.query(insertQuery, values);
    const recordId = rows[0].id;

    // 6. 返回API响应（前端可直接展示）
    return {
      statusCode: 200,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        code: 0,
        data: {
          recordId,
          originalUrl: urls[0],
          watermarkedUrl: urls[1],
          thumbnails: { s: urls[2], m: urls[3], l: urls[4] }
        }
      })
    };
  } catch (err) {
    console.error('处理失败:', err);
    return { statusCode: 500, body: JSON.stringify({ code: -1, msg: err.message }) };
  }
};

CREATE TABLE IF NOT EXISTS image_records (
  id SERIAL PRIMARY KEY,
  original_name VARCHAR(255),
  original_width INT, original_height INT, format VARCHAR(10),
  watermarked_url TEXT, thumb_200_url TEXT, thumb_600_url TEXT, thumb_1200_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

<!-- index.html 托管于COS静态站点 -->
<!DOCTYPE html>
<html>
<head><title>智能图片处理</title></head>
<body>
  <input type="file" id="imgFile" accept="image/*">
  <input type="text" id="watermark" placeholder="水印文字" value="AI Demo">
  <button onclick="upload()">处理并生成</button>
  <div id="result"></div>
  <script>
    async function upload() {
      const file = document.getElementById('imgFile').files[0];
      const wm = document.getElementById('watermark').value;
      const formData = new FormData();
      formData.append('file', file);
      formData.append('watermark', wm);
      const resp = await fetch('https://service-xxx.gz.apigw.tencentcs.com/process', {
        method: 'POST',
        body: formData
      });
      const json = await resp.json();
      if (json.code === 0) {
        document.getElementById('result').innerHTML = `
          <p>原图：<img src="${json.data.originalUrl}" width="200"></p>
          <p>水印图：<img src="${json.data.watermarkedUrl}" width="200"></p>
          <p>缩略图：<img src="${json.data.thumbnails.s}"> <img src="${json.data.thumbnails.m}"> <img src="${json.data.thumbnails.l}"></p>
        `;
      }
    }
  </script>
</body>
</html>

# serverless.yml
app: image-processor
stage: prod
component: scf
name: image-processor
inputs:
  name: image-processor
  src: ./src
  runtime: Nodejs18.15
  memorySize: 1024
  timeout: 10
  environment:
    variables:
      TENCENT_SECRET_ID: ${env:TENCENT_SECRET_ID}
      TENCENT_SECRET_KEY: ${env:TENCENT_SECRET_KEY}
      COS_BUCKET: ${env:COS_BUCKET}
      COS_REGION: ${env:COS_REGION}
      PGHOST: ${env:PGHOST}
      # ... 其他
  triggers:
    - type: apigw
      name: api
      protocols:
        - http
        - https
      environment: release
      endpoints:
        - path: /process
          method: POST

- name: Deploy to Tencent Cloud
  run: |
    npm install -g serverless
    sls deploy --force
  env:
    TENCENT_SECRET_ID: ${{ secrets.TENCENT_SECRET_ID }}
    TENCENT_SECRET_KEY: ${{ secrets.TENCENT_SECRET_KEY }}
    # 其他环境变量