手工自製網頁 base64 文字圖

注意事項：
    1. 內容可自行參考使用
    2. 全文皆為小編自行設計無參考

目錄

• 目錄
• 前言
• 成果
• 製作方法
  • 前置
  • 執行
  • 輸出

前言

2016.04.10

在編寫手記時偶而會需要放入一些插圖，常常覺得要找一個可以擺放「圖片」的空間是一件很麻煩的事情，即便找到可能有一天就會失效。這樣除了要管理自己電腦裡的團片，還要管理網路上的圖片相當麻煩。這兩天剛好參考到幾篇文章發現可以將圖片轉換成 base64的字串，這個效果還可以應用在網頁上，讓圖片直接跟著文章走，只要能找到文章就一定有圖，在管理時使用 Git 也變得相當方便，在這邊主要是講如何手動製作這樣的一個可以放在網頁上的 Img 標籤。

2016.04.21 新增 url2base64ImgTag

今天小編自己在使用的時候忽然發現圖片位置在網路上不再自己的電腦中，所以就在寫了一隻可以直接從網址轉換成 ImgTag 的方法，同時補上平日小編常用的 pbcopy。

P.S. pbcopy 功能為將 pipe 傳入的內容複製起來這樣就可以直接貼上了，十分便利！！
（此功能 Mac 有其他作業系統小編不太肯定）

成果

在開始講之前我們先來看一下成果，內容如下：

上圖為 base64 文字圖

可以點選圖片右鍵選擇『在新分頁中開啟影像』，會看到網址內容 如下：

data:image/jpeg;base64,/9j/4AAQSk....（略）

此連結就是這張圖轉為文字後的內容！！

製作方法

前置

在 ~/.bash_profile 增加以下內容

# 檔案轉 Img Tag
function pic2base64ImgTag {
    ext=$(echo $1 | perl -ne 'print "$1" if /([^.]+)$/')
    data=$(cat $1 | base64)
    echo "<img src='data:image/$ext;base64,$data' />"
}

# 網址轉 Img Tag
function url2base64ImgTag {
    ext=$(echo $1 | perl -ne 'print "$1" if /([^.]+)$/')
    data=$(curl -s -k $1 | base64)
    echo "<img src='data:image/$ext;base64,$data' />"
}

執行

在 Terminal 中執行以下指令

$ pic2base64ImgTag ${圖片的檔案路徑}

或

$ url2base64ImgTag ${圖片的網址}

Normal Example：

• $ pic2base64ImgTag pic.jpeg
• $ url2base64ImgTag http://goo.gl/NTovPj

Normal + pbcopy Example：

• $ pic2base64ImgTag pic.jpeg | pbcopy
• $ url2base64ImgTag http://goo.gl/NTovPj | pbcopy

P.S. 網址僅作參考，有使用 Google 短網址服務可能會失效。

輸出

只要再將輸出的內容放到網頁中就搞定嘍！！是不是還蠻簡單的 ~ 0w0

<img src='data:image/jpeg;base64,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' />