Gatsby如何通过gatsby-plugin-sharp生成带内边距的Facebook og:image

解决方案 #

gatsby-plugin-sharp 2.14.4 原生支持相关能力，给你两种可直接落地的方案：

方案一：最简配置，无需额外编码

你要的白色底+居中logo的效果直接通过GraphQL查询参数就能实现，fit: CONTAIN配合background参数会自动将缩放后空余区域填充为指定颜色，一步生成1200×627的成品图：

childImageSharp {
  fixed(
    quality: 100
    width: 1200
    height: 627
    fit: CONTAIN
    background: "#ffffff"
  ) {
    ...GatsbyImageSharpFixed
  }
}

该方案默认会让logo尽可能占满整个画布的同时保留比例，自动计算上下左右边距，适合对边距精度要求不高的场景。

方案二：自定义边距，直接调用Sharp的extend方法

如果需要精确控制边距大小（比如你要求logo固定为600×313，四边留固定宽度的空白），可以通过createResolvers扩展ImageSharp字段，直接调用Sharp原生的extend能力，批量处理所有logo：

1. 先在项目根目录的gatsby-node.js中添加如下代码：

const sharp = require('sharp')
const fs = require('fs-extra')
const path = require('path')

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    ImageSharp: {
      ogLogo: {
        type: "String",
        resolve: async (source) => {
          // 生成缓存文件路径，避免重复构建
          const outputFileName = `${source.name}-og.png`
          const outputDir = path.join(process.cwd(), 'public', 'generated-og')
          const outputPath = path.join(outputDir, outputFileName)
          
          // 已生成过的文件直接返回路径
          if (await fs.pathExists(outputPath)) {
            return `/generated-og/${outputFileName}`
          }

          // 处理图片
          const originalBuffer = await fs.readFile(source.absolutePath)
          await fs.ensureDir(outputDir)
          await sharp(originalBuffer)
            // 先把logo缩到指定大小
            .resize(600, 313, { fit: 'contain', background: '#fff' })
            // 调用extend方法添加边距，总尺寸刚好1200×627
            .extend({
              top: 157,
              bottom: 157,
              left: 300,
              right: 300,
              background: '#ffffff'
            })
            .toFile(outputPath)

          return `/generated-og/${outputFileName}`
        }
      }
    }
  })
}

2. 之后在需要获取og:image地址的GraphQL查询中直接调用新增的ogLogo字段即可：

childImageSharp {
  ogLogo
}

该方案完全自主可控，边距、背景色、logo尺寸都可以按需调整，适合有精确设计要求的场景。

内容的提问来源于stack exchange，提问作者Stefan