Developer notes · Compose API

把你網站上的一段文字，變成一張早安圖

任何網站、部落格、LINE 官方帳號或 App，只要組一個網址，就能把指定文字帶進早安圖工坊的編輯器。使用者在這裡可以自由選內建背景或上傳自己的照片、改字體與大小、加上吉祥話、農民曆模組，再一鍵分享到 LINE、WhatsApp、Instagram 或 Facebook。整個過程不需要帳號，也不會自動發佈任何東西。

試試看：帶一段文字進編輯器 English example

方式一：網址參數（最簡單）

把參數放在 #compose? 之後，用一般的 URL 編碼（encodeURIComponent）即可。查詢字串寫法 /?text=... 也可以，進站後會自動轉成同樣的結果。

https://aetoliving.com/#compose?text=先接受現在，才改變得了未來。&blessing=願您今日如實。&from=一真生活&bg=lotus

參數	說明	限制
`text`	主文，會放進圖片中央的主要文字（也接受 `main`）	最多 240 字，純文字，換行以 `%0A` 表示
`greeting`	問候語，預設「早安」	最多 40 字
`blessing`	祝福語，顯示在主文下方	最多 160 字
`sign`	署名；沒給的話會用 `from`	最多 60 字
`from`	來源名稱，會出現在提示訊息與署名	最多 60 字
`url`	來源網址，只記錄在作品設定裡，不會顯示在圖上	https 開頭，最多 300 字
`lang`	`zh`（預設）或 `en`
`cat`	主題：`soul` 心靈、`love` 兩性、`family` 親子、`career` 事業、`wealth` 財富、`health` 健康、`people` 人際、`study` 學習、`gratitude` 感恩、`buddhism` 佛學	決定「一鍵語錄」預選的吉祥話類別
`bg`	內建背景：`sunrise` 山間日出、`lake` 晨霧湖畔、`lotus` 蓮花禪意、`field` 金色麥田、`sakura` 櫻花春晨、`sea` 海上日出、`clouds` 雲海晨光、`dawnstars` 星空破曉、`ink` 墨韻山水、`paper` 淡雅素紙、`buddha` 佛光普照、`tea` 茶席晨光	不給則用預設背景，使用者仍可自己換
`ratio`	`4:5`（預設）、`1:1`、`9:16`
`font`	標題字型，例如 `Noto Serif TC`、`LXGW WenKai TC`	需是站內提供的字型，否則忽略
`align`	`left`、`center`、`right`

所有參數都只會進到使用者自己瀏覽器裡的編輯器，由使用者決定要不要下載、分享或發佈到早安牆。HTML 標籤會被去除，超過長度會被截斷。請勿帶入未取得授權的文字或圖片，站內有檢舉機制，查證後會下架。

方式二：一行腳本，網頁上任何文字都能做成早安圖

在你的網頁加入 embed.js，再給按鈕一個 data-morning-card 屬性，點擊就會在新分頁打開編輯器並帶入文字。

<script src="https://aetoliving.com/embed.js" defer></script>

<!-- 直接指定文字 -->
<button data-morning-card="先接受現在，才改變得了未來。" data-blessing="願您今日如實。" data-from="一真生活">做成早安圖</button>

<!-- 或抓取頁面上某個元素的文字 -->
<blockquote id="q1">把力氣，留給真正重要的事。</blockquote>
<a href="#" data-morning-card data-target="#q1" data-bg="paper">把這句做成早安圖</a>

程式裡也可以直接呼叫：

MorningCard.open({ text: '把速度放慢，把感受放大。', blessing: '願您今日細品。', from: '靜心觀照', bg: 'ink', ratio: '9:16' });
// 只要網址：
const link = MorningCard.url({ text: '...' });

支援的 data-* 屬性與參數名稱相同：data-greeting、data-blessing、data-sign、data-from、data-lang、data-cat、data-bg、data-ratio、data-font。沒給 from 與 url 時，會自動帶入你網頁的標題與網址。

方式三：嵌在 iframe 裡，用 postMessage 溝通

把編輯器嵌進你的頁面時，可以用 postMessage 送文字進去。編輯器載入完成會先送出 {type:'mcs:ready'}，套用成功會回 {type:'mcs:applied'}。

<iframe id="mcs" src="https://aetoliving.com/#studio" style="width:100%;height:90vh;border:0" allow="web-share; clipboard-write"></iframe>
<script>
  const frame = document.getElementById('mcs');
  window.addEventListener('message', e => {
    if (e.origin !== 'https://aetoliving.com') return;
    if (e.data && e.data.type === 'mcs:ready') {
      frame.contentWindow.postMessage({ type: 'mcs:compose', params: { text: '早安，願你今天順心。', from: '我的網站' } }, 'https://aetoliving.com');
    }
  });
</script>

iframe 內的「分享圖片」依賴瀏覽器的 Web Share API，部分 App 內建瀏覽器不支援；下載與複製連結不受影響。

為什麼這樣設計

不需要金鑰、不需要伺服器。一切都在使用者的瀏覽器裡完成，你的網站不會把資料交給我們。
使用者永遠是最後一關。帶入的只是草稿，要不要分享、要不要發佈到早安牆，由使用者決定。
可自由發揮。進到編輯器後，內建十二種背景、自訂照片、字體大小、顏色、農民曆與吉時模組、各類吉祥話語錄都能用。

有問題或想串接更深的功能（例如直接產圖的 API），歡迎到站內「說明」頁留下聯絡方式。願每一句好話，都傳得更遠。