tedshd's DevNote

tedshd's DevNote

Develop & Design Note by Ted

php - 載入文字轉成圖片

on 2020-05-14

需求

讀取一段文字後

可以決定字型

最後要轉成圖片

使用的工具

  • php7.2

  • freetype

提前說明需要用到 GD(這通常預設就啟動了)

freetype 通常會需要另外安裝

如何先檢查有沒有 GD 和 freetype

先用 phpinfo 檢查即可

-> % php -a
Interactive shell

php >

之後再打

echo phpinfo();

就會 output 資訊了

在搜尋 gd

gd

GD Support => enabled
GD Version => bundled (2.1.0 compatible)
GIF Read Support => enabled
GIF Create Support => enabled
JPEG Support => enabled
libJPEG Version => 9 compatible
PNG Support => enabled
libPNG Version => 1.6.32
WBMP Support => enabled
XBM Support => enabled

有安裝過 freetype 的話

就會一起顯示 FreeType Support

gd

GD Support => enabled
GD Version => bundled (2.1.0 compatible)
FreeType Support => enabled
FreeType Linkage => with freetype
FreeType Version => 2.10.1
GIF Read Support => enabled
GIF Create Support => enabled
JPEG Support => enabled
libJPEG Version => 9 compatible
PNG Support => enabled
libPNG Version => 1.6.37
WBMP Support => enabled
XBM Support => enabled
WebP Support => enabled

目前環境是 Mac OSX 10.14.6

安裝 freetype 的方式大致上有三種

  1. 重新編譯 PHP

  2. brew 安裝新的 PHP

  3. 用別人寫的安裝 PHP 的指令

因為剛好之前是用 Mac 自帶的 PHP 來用(PHP 7.1.23)

就順便用 brew 安裝 PHP 7.2 也順便改成用 brew 安裝的 PHP 7.2 當之後本地端的開發

brew 安裝完後其實就也一起裝好 freetype 了

這裡額外提一下自己其實有部分的開發都用 docker 開發了, 因為 PHP 版本不一(升級成本太高了, 且 PHP 不是開發主力) 所以就用 docker 封裝管理不同的服務

所以得注意一下 PHP 語法和 extension 的支援

Refer - macos缺少freetype終極解決方案

Refer - Mac缺少freetype解决方案

Code

先使用 imagettftext

Refer

需要再使用 imagepng 來輸出成圖片

Refer

以下為簡單的範例


// 先建立一個畫布
$im = imagecreatetruecolor(1400, 320);

// 建立顏色
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
// 建立一個塗滿背景的區域
imagefilledrectangle($im, 0, 0, 1400, 320, $white);

// 文字
$text = '中文繁體 text';
// 字型
$font = 'NotoSansTC-Regular.otf';
// 輸出的檔案
$file = 'font.png';

// 添加文字到圖片中
imagettftext($im, 112, 0, 10, 160, $black, $font, $text);
// 輸出成 PNG
imagepng($im, $file, 9);

當然要輸出成其他圖片格式 PHP 也有 imagejpeg 等 function 可以使用

Read more

Google search result with structured data

on 2020-05-04

前言

現在可以確認的是 Google 並不會以單純的 Google structured data 來呈現在 search result

以往驗證過的是 search result 裡的 title 和描述並不完全會採用 meta 中的 title 和 description

現在在線上的頁面也再次驗證了 Google 已經在使用 NLP 分析網站的內容了

以往是用 landing page 來測試, 因為內容不豐富所以不好測試

稍微變動 Google search result 也很難得到期望的結果

這已經和 2018 年以前的情況不一樣了

測試結果

https://blog.photogrid.app/posts/how_to_add_customized_watermark/

結構化測試工具

screenshot image

從上面的結果可以知道

mobile search result 的 image 是抓到頁面中的 image 而非 structure data(json-ld) 中的 image

而且 image 的 alt 也是 Google 自己判斷添加的

結語

有趣的一件事情是該頁面也是沒什麼內容的(因為就是個嵌入 Youtube 影片的頁面

因為這頁面最近在自然搜尋流量增加(在 Google search console 看到的)

所以就關注了一下

個人覺得這也間接驗證了兩件事

  1. Google 越來越重視內容且會分析頁面的內容

  2. 自然搜尋進去的點擊增加是會增加排名的, 就算沒有啥內容 XD(但是這個還要多一點驗證

所以在做頁面時也請產品或 PM 想好是要有什麼內容

給人看的懂也要給 Google 爬蟲看的懂 XD

Read more