摘要：自動調整圖片在此過程中，我開始思考一個問題既然和七牛云都提供基于地址的圖片變換，那么它們是怎么做到的呢根據我對的粗淺了解，最笨的方法可以直接以讀文件的方式從硬盤先讀取圖片的源文件，然后經轉換后再以流的方式輸出給頁面，但這樣效率肯定極低。

無圖，純干貨，信息量較大，慎入！

最近幾天的成果，濃縮下來就是這么一行代碼：

document.getElementById("img1").src = "http://www.mysite.com/imgproxy" + imgproxy(document.getElementById("img1").getAttribute("data-src"), 135, 85);

最初的時候只是看我的個人博客圖片大小高低不一，比較難看，試圖找一種方法能夠統一各圖片的高度。在網上搜索的結果是，發現了幾個Jykell的插件，例如jekyll-picture-tag，通過這個過程學到了不少東西，比如img標簽除了有srcset以外，還有一個額外的Picture標簽等等。本來想用這個插件，但另外一個插件jekyll-cloudinary的作者說Picture標簽并不好，應該直接使用Cloudinary的服務。

由此而想起在我上一篇文章中提到過的一篇教程中談到過的用國內的七牛云做圖床，于是開始嘗試把我網站文章中用到的圖片往七牛云搬家，圖片搬家不是問題，但又想在博客網站上增加https服務，于是在問過我的朋友馬壯之后，在Cloudflare上開通了https服務，但這又造成另外一個問題：七牛云上雖然放了我的圖片，但是七牛云本身不支持https服務，于是又得想辦法把圖片搬到Cloudinary。

至此我個人的博客算是可以告一段落。平心而論，七牛云的預置功能還是很不錯的，至少它對于URL的處理方式比Cloudinary要簡單，但唯一的遺憾是它不支持https。而如果圖片不支持https而網站使用https的話，Chrome會在Console里報警告錯誤，而我對網站的要求是：一個警告都不能有。

在此過程中，我開始思考一個問題：既然Cloudinary和七牛云都提供基于URL地址的圖片變換，那么它們是怎么做到的呢？根據我對PHP的粗淺了解，最笨的方法可以直接以PHP讀文件的方式從硬盤先讀取圖片的源文件，然后經轉換后再以流的方式輸出給頁面，但這樣效率肯定極低。于是經過搜索后發現了很多人推薦的libvips庫，再進一步搜索，在Github上發現了有很多顆星的imgproxy這個庫，似乎這就是我想要的東西。

于是我開始嘗試動手往公司的服務器上部署imgproxy。但這時候遇到一個問題，在CentOS上，imgproxy并沒有yum安裝包，還需要先手工安裝libvips，然后再編譯，而最要命的是，公司的服務器在國內，無法通過wget的方式直接安裝國外的軟件包，由此而我需要先把安裝包下載到本地，然后再上傳到公司的服務器上。這時候我又想取個巧，使用iterm內置的scp用鼠標拖拽的方式上傳文件。按照操作步驟的說明，安裝好了之后卻發現iterm的scp按鈕依然是灰色的，這時才發現是由于服務器上的fish版本過低，只有1.3，而最新的已經是2.6了。于是安裝2.6的repo，嘗試更新fish，卻總是報沖突。由此而想到將fish 1.3先卸載，就在這時災難發生了。

我直接執行了yum remove fish，但是在做這一步之前，我沒有將root用戶的shell切換回bash，由此而導致了root用戶找不到它的shell，因為它還在試圖尋找fish。這是一個致命的錯誤，我記得自己當時隱隱約約有預感，但還是沒有特別在意，覺得也許Linux系統會自動為root用戶賦予一個缺省的shell。結果我高估了Linux系統的能力。

退出登錄之后，我發現root用戶登錄不上了！如果不仔細觀察的話，你會感覺它的不能登錄的癥狀和密碼錯誤非常類似，但實際表現其實略有不同，在SSH端是不大看得出來的。我的第一反應是，如果root用戶無法通過SSH登錄了，那么應該通過console端登錄。

但當天下午，令人驚訝的是連console端也登不上了！這時候我意識到問題嚴重了。在網上搜索的結果是有人說應該以runlevel 1的方式登錄，然后嘗試修復/etc/shadow。但我完全不了解對于一臺云主機應該如何進入runlevel 1。只好提工單給客服。而客服的技術水平大家應該是知道的，只是建議我重置密碼之后再嘗試一下。而重置密碼必須要關機再重啟，就這樣來回折騰了很久也修不好。

在經過了漫長的等待之后，終于驚動了一個技術人員。他指出如果我必須要進runlevel 1的話，可以在系統開機的前3秒之間按下鍵盤的e鍵，然后就可以進入runlevel 1了。

但問題是這是一臺云主機，如何能在開機前3秒按鍵呢？好在現在云主機的console功能非常發達，你可以開著console重啟，這時候網絡斷掉，然后不停地刷新console，你會在電腦開機的一瞬間看到一個有字的黑畫面，這時候迅速按下e鍵也能進入系統。然后再次按下e，把啟動模式修改為Linux single。

按照他的指導，我終于能夠以runlevel 1的方式進入了系統，首先嘗試用/etc/passwd重建/etc/shadow，再次重啟，無果，還是登錄不進去。至此為止，所有關于密碼的努力均告失敗。我想，唯一的辦法只能嘗試看能不能切換root用戶的shell：

chsh -s /bin/bash

把root用戶的shell切換成bash之后，再次重啟電腦，果然可以成功登錄了！

接下來，我還是需要安裝fish，但yum install fish結果fish還是1.3。我還要繼續上次不成功的征程。再次把fish從1.3換成2.6。依然沖突。這次我學精了，我先把root的shell腳本切換成bash，然后yum remove fish，再次安裝，發現這個fish 1.3的來源是一個不知什么時候裝上的名叫dag的repo，于是嘗試把這個dag的repo禁止掉：

yum-config-manager --disable dag

然后再次安裝，終于裝上了fish 2.6。

至此，基本所有阻塞性因素都消除了，我開始將libvips的代碼拖拽進服務器，然后編譯。但這時候問題又來了，imgproxy必須運行在docker里，而說明文檔上只說需要自己build一個docker，但并沒有指明以什么操作系統為基礎去build，好在官方提供了一個它們自己的docker文件，可以直接運行imgproxy。

??！早知如此，我何必折騰這么一大圈？還差點毀掉了我的系統。不過好在學到了不少東西。好吧，于是我們開始直接安裝使用imgproxy官方提供的docker：

$ docker pull darthsim/imgproxy:latest
$ docker run -e IMGPROXY_KEY=$YOUR_KEY -e IMGPROXY_SALT=$YOUR_SALT -p 8080:8080 -t darthsim/imgproxy

但是這個imgproxy的使用方式又是非常的不友好，它完全不像七牛云或者Cloudinary那樣直接在URL地址上構建就行了，它需要自己根據自己的key和salt產生簽名，然后再用簽名構建URL，它給了各種語言的例子，唯獨沒有java的，最后我只好根據它自己的javascript語言的例子構建一個js代碼，用于替換頁面中的圖片鏈接。

但問題又來了，它給定的這個包是一個node的js腳本，里面有require語句，無法直接用于瀏覽器。這時候又得請出browerify，用它來編譯node的腳本為可以供瀏覽器直接使用的腳本。好在過程并不復雜，編譯之后得到的bundle.js文件，我們直接在頁面中引用就行了。于是就得到了本文開頭的一行代碼：

以及相關的js:

window.imgproxy = function (url, width, height) {
  const crypto = require("crypto")

  const KEY = "somekey"
  const SALT = "somesalt"

  const urlSafeBase64 = (string) => {
    return new Buffer(string).toString("base64").replace(/=/g, "").replace(/+/g, "-").replace(///g, "_")
  }

  const hexDecode = (hex) => Buffer.from(hex, "hex")

  const sign = (salt, target, secret) => {
    const hmac = crypto.createHmac("sha256", hexDecode(secret))
    hmac.update(hexDecode(salt))
    hmac.update(target)
    return urlSafeBase64(hmac.digest())
  }

  const resizing_type = "fit"
  const gravity = "no"
  const enlarge = 0
  const extension = "jpg"
  const encoded_url = urlSafeBase64(url)
  const path = `/${resizing_type}/${width}/${height}/${gravity}/${enlarge}/${encoded_url}.${extension}`

  const signature = sign(SALT, path, KEY)
  const result = `/${signature}${path}`
  return result;
}

當然你需要npm install crypto，然后編譯：

browserify main.js > bundle.js

你可以把你自己得到的URL去和這個網站生成的URL做對比，如果完全一致，就說明你的代碼配置正確，否則就還是有可能不成功。

這就是這兩天來的結果。我學到了不少東西，你學到了嗎？