因為真的太簡單了,所以直接公開一波 Source Code

<?php

function handleText($text) {
    $textChunks = array();
    $textSplit = explode("<br/>", $text);
    # 這裡應該是這個專案比較值得一題的地方
    # 因為英文與中文的寬度不太一樣,所以在這裡的程式是用來計算該行已經用了多寬
    # 英文寬度大概是中文寬度的一半
    # 只要當前這行超過寬度,就會自動斷行
    # 不過這並不是自動判斷圖片寬度來做的
    # 而是直接給定最寬的值,超過就斷行
    # 所以如果有更換圖片或字體的話要調整 enScore, tcScore 以及 maxScore 這三個值。
    foreach($textSplit as $split) {
        $chunk = "";
        $currentScore = 0;
        $enScore = 35;
        $tcScore = 70;
        $maxScore = 1800;
        $chrArray = preg_split('//u', $split, -1, PREG_SPLIT_NO_EMPTY);
        foreach ($chrArray as $splitChr) {
            if(preg_match("/^[a-zA-Z,\/+=. ]$/", $splitChr)) {
                if($currentScore + $enScore <= $maxScore) {
                    $chunk .= $splitChr;
                    $currentScore += $enScore;
                } else {
                    array_push($textChunks, $chunk);
                    $chunk = "";
                    $currentScore = 0;
                }

            } else {
                if ($currentScore + $tcScore < $maxScore) {
                    $chunk .= $splitChr;
                    $currentScore = $currentScore + $tcScore;
                } else {
                    array_push($textChunks, $chunk);
                    $chunk = "";
                    $currentScore = 0;
                }
            }
        }
        array_push($textChunks, $chunk);
    }

    return $textChunks;
}


header('Content-type: image/jpeg');
header("Cache-Control: public, max-age=604800");

// Load And Create Image From Source
$our_image = imagecreatefromjpeg('image1.jpg');

// Allocate A Color For The Text Enter RGB Value
$white_color = imagecolorallocate($our_image, 0, 0, 0);


// Set Text to Be Printed On Image
$text = $_GET["text"] ?? null;

if(!is_null($text)) {

    $textChunks = handleText($text);

	foreach ($textChunks as $index => $chunk) {
        if($index == 9) break;
        $size = 16;
        $angle = 0;
        $left = 50;
        $top = 80 + $index * 36;

        imagettftext($our_image, $size, $angle, $left, $top, $white_color, "./font.otf", $chunk);
    }
}

imagejpeg($our_image);

imagedestroy($our_image);

更換字體與圖片

這個專案只需要組共三個檔案:

.
├── font.otf
├── image1.jpg
└── index.php

更換字體

下載想要更換的字體然後重新命名為font.otf然後放在與index.php同一個資料夾中。

更換圖片

下載想要更換的圖片然後重新命名為image1.jpg然後放在與index.php同一個資料夾中,並修改原始碼中的$maxScore,$enScore以及$tcScore

效果展示

因為感覺好像沒什麼在使用,所以就把它 shutdown 了,所以以下的圖片已經不是實際效果了。

GET https://timeline-img.floatflower.me/image.jpg?text=Timeline%20Image

後記

因為目前這個服務託管在 GoDaddy 的最低硬體規格的主機中,所以返回速度非常的慢,為了提高他的返回速度,我在這個服務前面又擋了一層 Cloudflare CDN, 並設定為Cache Everything,這樣只要曾經產生過一次的圖片,再快取過期前都可以從 Cloudflare CDN 中直接做提供。