[成果分享] ココナ印章產生器

先聲明，我沒有玩 BA，只是看到心奈蓋章章很可愛所以

(被拖走

Links

Demo (with UI): https://jcxyis.com/kokonastamp
Source Code: https://github.com/JCxYIS/KokonaStamp

下面這圖片是隨機生成的，來看看心奈這次得了幾分~

技術細節

前一陣子剛好在研究把動態內容嵌入圖片的方法，有寫了 svg 相關的 code 可以直接拿來用。

SVG 是啥

可縮放向量圖形（英語：Scalable Vector Graphics，縮寫：SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述圖像內容，因此是一種和圖像解析度無關的向量圖形格式。

以上內容是從維基上抄的，一般我們看到的 SVG 大多是很多向量點集合而成的圖形，在瀏覽器渲染時才會 render 出來，這也是 SVG 的原意 (畢竟叫做可縮放向量圖形)。然而，SVG 因為是文字描述的，它也支援內嵌文字或圖片 (所以你可以把任意圖片包在 svg 底下偽裝)，甚至是部分 JS 語法它也支援，所以在 svg 做些小動畫是可行的 (這部分我還沒研究)。

接下來我們進入程式環節。

來做剛剛提到的偽 SVG

第一步先來架好伺服器環境，嘗試讓瀏覽器 render 出簡單的間諜 svg 吧。
隨意寫個 API Controller，加入以下 route

[HttpGet]
public IActionResult GetKokonaStamp()
{           
    string s = $"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"cool\" width=\"600\" height=\"200\" viewBox=\"0 0 600 200\">\n";
    s += "<image href="https://i.imgur.com/FVM77ZR.png" x="0" y="-35" width="660"/>\n";
    s += "</svg>\n";
    return Content(s, "image/svg+xml; charset=utf-8");
}    

上面 code 需要注意的部分：

• SVG 除了 width 和 height 以外還要指定 viewbox 矩陣，可以看 這篇文章 了解它的原理
• 在回應指定了 Content Type 為 image/svg+xml，不然瀏覽器會把它當純文字用

可以看到有圖片出來了

Encode img source with base64

但是如果我們從網站上直接用 <img> 來存取圖片，外連的圖片會找不到：

這時我們要把圖片來源用 base64 編碼過，再直接塞到 img src 裡面給瀏覽器解析。

C# 有 API 可以直接把圖片轉 base64：

private string WwwrootImgToBase64(string fileNameInWwwroot)
{
    return Convert.ToBase64String(System.IO.File.ReadAllBytes(Path.Combine(_hostEnv.WebRootPath, fileNameInWwwroot)));
}

_hostEnv 的 init:

private readonly IWebHostEnvironment _hostEnv;

public KokonaStampController(IWebHostEnvironment hostEnv)
{
    _hostEnv = hostEnv;
}

這個 function 可以從 wwwroot (ASP.net core 的保留資料夾，專門放靜態檔案)找到圖片並把它轉成 base64 string。

把原本 route 登記 image 那行稍微改一下：

s += "<image href=$"data:image/png;base64, {WwwrootImgToBase64("polaris.png")}" x="0" y="-35" width="660"/>\n";

這樣從嵌入 img 也 ok 了

ココナ 印章素材

在網上找素材，再用 photoshop 慢慢切

輸出圖層不要勾修剪圖層，不然等下要手動排位置會很麻煩。同時檔案類型我選 PNG-24，不然輸出透明檔案會有白邊 (即使編輯器裡看不到)

數字字體我用開源字型霞鹜文楷，加粗之後轉個大約 10 度，效果挺好的

拼在一起

把素材圖層都拆出來放在 wwwroot 底下之後，就是慢慢喬位置的細工。我前面提到我有寫過 svg 相關的 wrapper，在這裡喬位置會比較順一點，有興趣就翻一下 source code 吧，之後有時間再打一篇介紹。

https://github.com/JCxYIS/KokonaStamp/blob/main/Controllers/KokonaStampController.cs