next api og image下载 - next api og image源代码下载

next api og image

Ai源码

Ability to set custom chrome options

下载

next.js api og图像·

简单的库，目的是提供简单的方法来动态
使用Next.js API路由生成开放图像。

如果您不熟悉动态开放式图像概念 - 请参阅Vercel/OG-Image Repository的Readme，以获取非常详细的解释。

您可以将该项目视为更简单，可配置的版本，提到了Vercel存储库

特征

？超级简单的用法
适用于无服务器环境
在React和HTML中定义模板的优雅方法
？多种策略 - 通过获取和查询参数或发布和JSON主体传递值
？打字稿兼容

安装

在您的下一个项目项目中，执行：

npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambda

关于同伴依赖性的简短说明

如果您的无服务器功能不适合Vercel （50MB）上允许的尺寸帧，则可能需要安装旧版本的chrome-aws-lambda

为此，用[email protected] （47.6 MB）替换chrome-aws-lambda （同时添加依赖项）

请，请参阅＃23（评论）以获取更多信息

例子

您可以在此处找到更多示例：

JavaScript
- JavaScript的基本用法
- 带有样式组件的基本用法
- parwindcss的基本用法
- 提供的反应模板的基本用法
- 加载自定义本地字体的基本用法
打字稿
- 用打字稿的基本用法
- 用打字稿的基本用法并使用查询策略进行反应
- 使用打字稿的基本用法，并使用身体策略（JSON）进行反应
- 使用打字稿，React模板和自定义本地字体的高级用法

example/目录包含Simple Next.js应用程序实现next-api-og-image 。要完全探索自己在其中实现的示例 - 只需进行npm link && cd example && npm i && npm run dev ，然后导航到http：// localhost：3000/

基本用法和解释

HTML模板

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } )

反应模板

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } )

创建模板

您可能会注意到html并在配置中的react属性。他们的责任是向图像创建者（浏览器屏幕快照）提供HTML文档，并充满您的价值。

配x笔记
模板不能模棱两可。你必须
定义react或html 。永远不会一次

规格

html和react属性是模板提供商功能。每个函数的第一个（也是唯一的）参数除了HTTP请求的查询参数转换为对象符号。

这使您可以通过简单地访问这些参数来创建完全自定义的HTML模板。这样做的首选方法是对象破坏。

配x笔记
html和react模板提供商功能
可以定义为异步

例子

HTML模板

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } )

反应模板

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } )

如果将获得http请求发送到API路由，则使用上述代码（例如localhost:3000/api/foo?myQueryParam=hello ）将其呈现为等于'Hello'的内容

策略

next-api-og-image允许您选择为模板提供值的策略。可用策略是：

query （默认） - 值通过查询参数传递并获取HTTP请求。
这些值⛔️无法通过在模板提供商功能中嵌套破坏嵌套或访问。
body - 值通过后HTTP请求和JSON主体传递。
这些值✅可以通过在模板提供商函数中嵌套破坏来嵌套和访问。

策略是由配置中的strategy道具确定的。默认策略是query 。

配x笔记
不管策略如何 - 所有属性（每个属性）
被隐式施放到字符串，即使是很长的JSON的嵌套值

模板提供商功能中的类型

如果您正在使用Typescript，则可能要输入这些内容。好吧...它实际上非常容易！只需将通用类型添加到withOGImage函数中。

带有查询参数的键入query策略?foo=hello&bar=friend看起来像这样：

 export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )

带有JSON有效载荷{ "foo": "hello", "imNested": { "bar": "friend" }}键入body策略将看起来像：

 export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } )

错误

当策略设置为query时，您将使用JSON主体发送http请求，或者将策略设置为body ，并且您正在发送带有查询参数的http请求next-api-og-image将：

会丢下运行时错误
将适当的响应消息设置给客户端您可以通过设置dev: { errorsInResponse: false }在配置中

钩住生成后的过程

在某些情况下，您可能想在产生图像后做某事（换句话说 - 执行逻辑） 。这可以通过提供函数hook配置属性来轻松完成。唯一的参数是NextApiRequest对象，并附有image 。

示例（JavaScript）：

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( {
  template : {
    react : ( { myQueryParam } ) => < div > { myQueryParam } </ div > ,
  } ,
  dev : {
    inspectHtml : false ,
  } ,
  hook : ( innerRequest ) => {
    console . log ( innerRequest . image )
    // will print the generated image on the server as Buffer
  } ,
} )

分裂文件

将所有模板内联放置在Next.js API路由中不应该是问题的，但是如果您希望将内容保存在单独的文件中my-template.js则可以遵循创建文件的常见模式my-template.html.js

 export default function myTemplate ( { myQueryParam } ) {
  return `<h1> ${ myQueryParam } </h1>`
}

...或打字稿

 import type { NextApiOgImageQuery } from 'next-api-og-image'

type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
  return `<h1> ${ myQueryParam } </h1>`
}

然后将其导入并嵌入withOGImage中。

加载自定义本地字体

为了从项目源加载自定义字体，您需要使用BASE64格式的字体创建源文件，或者只需将字体文件内容绑定到下一个方面的变量。JSAPI ROUTE

配置

除了html和react配置属性（在template中） （需要）外，您还可以指定有关next-api-og-image应如何行为的其他信息。

带有默认值的示例配置（除了template.html或template.reeact.prop） ：

 const nextApiOgImageConfig = {
  // Values passing strategy
  strategy : 'query' ,
  // Response's 'Content-Type' HTTP header and browser screenshot type.
  type : 'png' ,
  // Screenshot's quality. WORKS ONLY IF 'type' IS SET TO 'jpeg'
  quality : 90 ,
  // Width of the image in pixels
  width : 1200 ,
  // Height of the image in pixels
  height : 630 ,
  // 'Cache-Control' HTTP header
  cacheControl : 'max-age 3600, must-revalidate' ,
  // Hook function that allows to intercept inner NextApiRequest with `ogImage` prop attached.
  // useful for e.g. saving image in the database after the generation.
  // The hook function return is Map containing custom headers that will be set BEFORE sending
  // response to the client.
  hook : null ,
  // NOTE: Options within 'chrome' object only works when next-api-og-image is run in server (not serverless!!) environment.
  chrome : {
    // Custom command-line args passed to the browser start command
    // by default, no arguments are provided.
    args : null ,
    // Custom executable provided. Useful when you e.g. have to run Chromium instead of Google Chrome
    // by default, executable is retrieved automatically (it looks for Google Chrome in the filesystem)
    executable : null ,
  }
  // NOTE: Options within 'dev' object works only when process.env.NODE_ENV === 'development'
  dev : {
    // Whether to replace binary data (image/screenshot) with HTML
    // that can be debugged in Developer Tools
    inspectHtml : true ,
    // Whether to set error message in response
    // if there are strategy related errors
    errorsInResponse : true ,
  } ,
}