[blog文章寫作流程]-優化圖片上傳流程

寫作blog文章往往需要圖片來說明，但是一旦要放上圖片，抓圖、上傳圖片、縮圖、將縮圖網址複製，然後再貼上文章，如果花在這些瑣碎的時間上，寫作的興趣應該已經大大地降低了，為了能夠讓寫作的時候更流暢一些, 將經常要處理流程優化是必要的。

1. 上傳圖片至圖床

首先，圖床的選擇，使用flickr

  • 優點: 免費空間，空間大，自動縮圖，縮圖的品質優異，提供API，手機可自動上傳
  • 缺點: 可用免費工具似乎不多

2. Python script自動上傳, 抓取縮圖網址

利用python script來自動上傳電腦的圖片,並且產生縮圖網址,script應該有以下功能

  • 上傳資料夾圖片(檢查資料夾圖片是否已經上傳，不重複上傳)
  • 抓取最近上傳圖片，產生圖片縮圖網址 (選擇縮圖尺寸)
  • 最近天數
  • 特定日期 (日期範圍)
  • 產生Markdown語法，抓取圖片description與縮圖連結
  • 如何preview指定範圍內的照片，並且選擇需要產生縮圖檔案？

找到一個可參考的Git repro flickr-uploader

2.1 簡化flickr-uploader

原本的flickr-uploader用意是在讓本地端圖片資料夾可以跟flickr同步，所以會記錄本地端檔案並且與flickr檔案比較，上傳新檔案，同時也將本地端不存在檔案從flickr上刪掉，並且會自動將資料夾名稱做為上傳之後的set名稱。

我的uploader用途比較單純，當有些圖片是透過電腦抓下來的，或是電腦畫面擷取來的，可以當作部落格用途的圖片，可以利用uploader將圖片上傳，而不用費心登錄flickr然後選擇圖片上傳，所以可以自動將目錄中圖片上傳，並且加上特定的tag，或是將這些圖片都放到特定的set中，如果可以做到資料夾內容變更，就自動偵測並且上傳，上傳後再自動更新最近上傳列表，並且可供選取使用。

2.2 抓到flickr照片資訊資後轉換成照片url

轉換照片url

格式如下

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

字母後綴如下：

s 小正方形 75×75
q large square 150×150
t 縮圖，最長邊為 100
m 小，最長邊為 240
n small, 320 on longest side
– 中等，最長邊為 500
z 中等尺寸 640，最長邊為 640
c 中等尺寸 800，最長邊為 800†
b 大尺寸，最長邊為 1024*
h 大型 1600，長邊 1600†
k 大型 2048，長邊 2048†
o 原始圖片, 根據來源格式可以是 jpg、gif 或 png

3. 透過瀏覽器(web browser)篩選照片，與選擇所需照片

透過python script可以篩選出最近或特定日期的照片以後，要如何將縮圖顯示出來，並且透過瀏覽器選取要的照片，並且選完之後可以點一個按鈕，將選出的照片產生markdown語法顯示圖片的語法，並且複製到剪貼簿，然後可以直接貼上Markdwon文章中

找到一個完全符合我需求的jQuery套件，有美美的介面可以選取照片，所以後面要做的就是讓選取的照片去產生出我要的Mardkwon語法

image-picker demo

GitHub image-picker

imag-picker網頁的說明不多，一開始以為只要設定好option的data-img-src屬性，就會自動出現圖片可以選取

<div class="picker">
      <select multiple="multiple" class="image-picker show-html">
        <option data-img-src='http://placekitten.com/220/200' value='1'>Cute Kitten 1</option>
        <option data-img-src='http://placekitten.com/180/200' value='2'>Cute Kitten 2</option>
        <option data-img-src='http://placekitten.com/130/200' value='3'>Cute Kitten 3</option>
        <option data-img-src='http://placekitten.com/270/200' value='4'>Cute Kitten 4</option>
      </select>
    </div>

結果是了老半天都只出現原始的select元件，網頁上也只說要將css&js檔匯入，結果我將demo頁面原始檔放到我local開啟，發現圖片也有顯示出來，慢慢將整個網頁我不需要的部份刪除，才發現需要再透過jQuery設定，並不是預設就開啟，所以下面的設定是需要的

<script type="text/javascript">

    jQuery("select.image-picker").imagepicker({
      hide_select:  false,
    });
  </script>

然後就是開頭的匯入js&css檔

  <link rel="stylesheet" type="text/css" href="image-picker/image-picker.css">
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
  <script src="image-picker/image-picker.js" type="text/javascript"></script>

下面是遇到的一些問題找到的答案

  1. [python]如何將dict型態output成json檔案

因為要將python抓回來的最近照片清單存成json，讓網頁可以直接存取json的照片list

  1. 如何用javascript自動將需要的字串複製到剪貼簿

在網頁中選取的照片直接複製到剪貼簿，方便直接貼到文章中

我將flickr-uploader修改後版本 flickr-uploader-for-blog

demo影片

Next target:

2017/1/8 Update: [將Markdown文章透過blogger API自動上傳修改文章] (http://maycehsu.blogspot.tw/2017/01/use-blogger-python-api-to-publish-from.html)

發佈留言