Timeline-img 一個無聊下午的產物 - 將文字嵌入圖片
這是一個下午無聊的時候花了一小時做出來的東西, 其實本來是要用來當作自己 Blog 動態牆發廢文的時候當作 og:image 使用的圖片, 結果發現發在 Blog 動態牆的頻率不是很高, 所以先關閉一下動態牆的頁面,但是這也算是一個小專案, 所以就把他公開出來。
因為真的太簡單了,所以直接公開一波 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 中直接做提供。