flickr 圖床腳本 assocr

寫上一篇作業終於得面對圖片的問題， 到底部落格該怎麼貼圖這件事。 我一直用 flickr 當圖床， 但他的上傳面和內嵌介面不好用， 只好自己寫一個腳本 assocr 來用。

flickr 的上傳介面還不錯， 但要一次取得一堆圖片的內嵌就很不方便。 而且寫文到一半，還得開網頁介面傳圖， 再把圖的網址一張張貼回來，很麻煩。

而且上傳後的網址我會看不出哪一張是哪一張， 對應不出檔名，貼圖不方便。 一堆圖片上傳後變一堆網址。 我比較希望是可以用檔名或有意義的字串直接引用。

最後我想到的解法是把內嵌的網址存成一個 js 物件， 用自定的標示符作 key，用內嵌所需的作 value。 然後用 key 直接存取圖片。

大概就是上傳完後取得圖片內嵌網址， 然後和原本的檔名輸出成 json 格式， 然後放在 script 標籤內。 像這樣

之後就能用 flk.gn('2017-10-28 10-13-39 的螢幕擷圖.png') 取得圖片的 node，或也能用 regex 取 flk.gn(/10-13-39/) ， 如果用了 global flag 就會回傳陣列 flk.gn(/螢幕擷圖/g) 。 （這部份是我手動偵測 regexp 的 flag，再決定要回傳什麼的。）

js flk.gn('10-13-39')

另外因為我覺得檔案有點大， 所以另外寫成一個 flickr.js， 沒有和 ./ext/meta-bloging.js 合在一起。 所以如果要貼圖要先用 <script src="ext/flickr.js"></script> 引用。

麻煩的內嵌網址

上傳的圖還不是有圖片 id 就能內嵌， 得要有一堆其它資訊才行， 像所在伺服器、api 金鑰。 這些資訊都得要 call api 才能要得到。

flickr 真是實作 OAuth 很轍底， 連引用圖片都要金鑰。 還是 imgur 大方好用。

實作上則是我上傳後 flickr 只會回傳圖片 id， 我還要再用圖片 id 查詢該圖片的詳細資料， 才會回傳內嵌要用到的其它資訊。