在 JavaScript 中建立圖片和 PDF

每個方法都接受範本 ID 和一個選項物件。所有選項都是選填。

建立圖片

createImage 會渲染範本，並回傳圖片的位元組。

#templateIdstringrequired

範本 ID，例如 tpl_xxx。

#modificationsModification[]

要放進範本圖層的值。每個項目用 name 指定一個圖層。你沒有列出的圖層會保留範本中的值。每種圖層接受哪些欄位，請見 Modifications。

#format'png' | 'jpeg' | 'webp'default: png

圖片格式。

import { writeFile } from "node:fs/promises"

const { result, error } = await bannerify.createImage("tpl_xxx", {
  modifications: [
    { name: "headline", text: "Launch promo" },
    { name: "price", text: "$29" },
  ],
  format: "webp",
})

if (error) throw new Error(error.message)

await writeFile("launch-promo.webp", Buffer.from(result))

result 是 ArrayBuffer。在瀏覽器或 edge 執行環境中，請把它當作 Response 的內文傳送，並把 Content-Type 標頭設為圖片類型。

建立 PDF

createPdf 接受相同的 templateId 和 modifications，沒有 format 選項。

const { result, error } = await bannerify.createPdf("tpl_invoice", {
  modifications: [
    { name: "customer", text: "Acme Studio" },
    {
      name: "line-items",
      columns: ["Item", "Qty", "Total"],
      rows: [{ Item: "Automate plan", Qty: 1, Total: "$29.00" }],
    },
  ],
})

if (error) throw new Error(error.message)

await writeFile("invoice.pdf", Buffer.from(result))

建立已儲存的圖片

createStoredImage 會渲染圖片並儲存下來，回傳網址而不是位元組。當你想把連結放進電子郵件、資料庫的資料列或無程式碼工具時，就可以使用它。

它接受 createImage 的選項，外加 s3Config。

#s3ConfigS3Config

把檔案儲存到你自己的 S3 相容儲存貯體。這需要 Scale 或 Enterprise 方案。沒有設定時，Bannerify 會把檔案儲存在它的 CDN，並回傳以 https://images.bannerify.co/files/ 開頭的連結。

const { result: url, error } = await bannerify.createStoredImage("tpl_xxx", {
  modifications: [{ name: "headline", text: "Welcome back" }],
})

if (error) throw new Error(error.message)

console.log(url)

S3Config 有以下欄位：

欄位	必填	說明
`endPoint`	是	S3 端點，不含通訊協定
`region`	是	儲存貯體所在區域
`bucket`	是	儲存貯體名稱
`accessKey`	是	存取金鑰
`secretKey`	是	私密金鑰
`port`	否	端點的連接埠。預設為 `443`
`useSSL`	否	預設為 `true`
`pathStyle`	否	使用路徑樣式的網址。預設為 `false`
`customUrl`	否	回傳連結的網址範本。以 `{key}` 代表檔案的鍵

處理結果

三個方法都會回傳 { result } 或 { error }。請見處理錯誤。