## 前言
在學習前端的的過程中，多少一定都有聽過 Webpack 這個名詞，而什麼是 Webpack 呢？當我聽到這個問題的時候，第一時間會先愣住，不知從何回答起，經過幾秒鐘的思考後，最後回答會是「它是一個模組打包工具」，不知道大家有沒有和我一樣呢？這個回答沒有錯，不過可能會有更多疑問，那模組又是什麼？為什麼需要打包？

這篇文章，將從模組化切入，來帶大家了解 Webpack 究竟幫我們做了多少事？
## 模組化
### 為什麼需要模組化設計?
試著回想我們最開始學習 JavaScript 的時候，我們會把程式碼寫在 HTML 檔案中，如下

```html
// index.html

<script>
    var a = 1

    function double(x){
        return 2 * x
    }

    double(a)
</script>
```

但隨著功能越來越多我們會把 `script` 裡面的內容獨立出來到一個 JS 檔中：

```html
// index.html

<script src="./main.js"></script>
```

```javascript
// main.js

var a = 1

function double(x){
    return 2 * x
}

double(a)

var b = 2

function square(x){
    return x * x
}

square(b)

var c = 4

function add(x, y){
    return x + y
}

add(c, b)
```

再來想像一下，當開發人員越來越多，功能也一直再新增，如果都繼續編寫同一個 JS 檔，當行數不再是 24 而是 1000，將變得非常難以閱讀及維護。為了避免這樣的情況發生，我們可以拆成多個 JS 檔，如下

```html
// index.html

<script src="./utils.js"></script>
<script src="./main.js"></script>
```
```javascript=
// utils.js

function double(x){
    return 2 * x
}

function square(x){
    return x * x
}

function add(x, y){
    return x + y
}
```

```javascript
//main.js

var a = 1
var b = 2
var c = 4

double(a)
square(b)
add(c, b)
```

目前我們雖然把程式碼分開了，但實際上它還是在同一個作用域下，其中的變數是會互相影響。例如，我新增了一個 utils2.js 檔，並宣告一個 `add` 函式，且實作內容和 utils.js 中的 `add` 函式不一樣，如下

```html
// index.html
<script src="./utils.js"></script>
<script src="./utils2.js"></script>
<script src="./main.js"></script>
```

```javascript
// utils.js

function add(x, y){
    return x + y
}
```

```javascript
// utils2.js

function add(x, y){
    return x + y + 4
}
```

```javascript
//main.js

var b = 2
var c = 4

console.log(add(c, b)) // 10
```
如果我們期望在 main.js 使用 `add` 函式會得到兩數之和，會因為 utils2.js 在 utils.js 後面載入，而覆蓋掉 utils.js 的函式宣告，最後導致結果出現不如預期。所以我們需要將 utils.js 與 utils2.js 這兩個檔案的內容各自獨立出來，互不干擾，而想要達到這樣的效果，我們可以使用 IIFE 來完成。

#### IIFE（立即呼叫函式 Immediately Invoked Functions）

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        add: function(x, y){
                return x + y
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
// utils2.js

var moduleUtils2 = (function(){
    var author = 'Mr.B'

    return {
        add: function(x, y){
                return x + y + 4
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
//main.js

var b = 2
var c = 4

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils.add(c, b)) // 6

console.log(moduleUtils2.getAuthor()) // 'Mr.B'
console.log(moduleUtils2.add(c, b)) // 10
```

透過立即呼叫函式的方式，建立作用域幫我們達到三點效果：
1. 解決變數或是函式命名上的衝突
2. 能夠建立私有變數與方法
3. 自由選擇要將哪些變數、方法暴露出去

因此，我們打算在 main.js 檔案中，取得變數 `author` 的值，只能透過 `moduleUtils.getAuthor()` 的方法。最值得注意的地方是，這樣子規劃，只能讀取而無法直接修改。這種模式就是最一開始模組化的概念，稱為模組模式。

這個模式看起來好像很完美了，但其實還是有一個小問題。假設 utils2.js 這個模組需要依賴 utils.js 的方法或是變數，我們就一定要注意 script 引入的先後順序，如下

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        getAuthor: function(){
            return author
        }
    }
})()

```

```javascript
// utils2.js

var moduleUtils2 = (function(module){
    var author = 'Mr.B'
    var authorFromUtils = module.getAuthor()

    return {
        getTwoAuthors: function(){
            return author + '_&_' + authorFromUtils
        }
    }
})(moduleUtils)
```

```javascript
//main.js

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```
```htmlembedded=


<script src="./utils.js"></script>
<script src="./utils2.js"></script>  
<script src="./main.js"></script>
```
隨著相依性的檔案越來越多，專案的維護難度也會隨之提高。

综合以上，隨著前端專案規模越來越大，就越需要模組化的開發，來提升專案的維護性。隨著趨勢的發展，就有些模組化的規範相繼而出，而其中最為有名的就是 CommonJS。

## Node.js 與 CommonJS
Node.js 能夠讓 JavaScript 在 server 環境中執行，並採用了 CommonJS 模組規範。所以在 server 端來說，每個檔案都是獨立的作用域，且都有 `require` 函式和 `module` 物件。

1.`module` 物件
每個檔案都會有 `module` 物件，這個物件底下有一個 `exports` 的屬性，如果在這個檔案中有想要輸出的變數或是方法，可以透過賦值給 `exports` 來達成，如下

```javascript
// 只有單一值
var name = 'will'

module.exports = name
```

```javascript
// 多個值 第一種寫法
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}
```

```javascript
// 多個值 第二種寫法
var name = 'will'

function getName(){
    return name
}

module.exports = {
    name,
    getName
}
```

2.`require` 函式

當需要載入某檔案，取得 `module.exports` 的值時，會使用 `require` 函式尋找該檔案，如下

```javascript
// a.js
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}

// b.js
var aModule = require('./a.js')
aModule.getName() // will
```

了解 CommonJS 規範之後，我們就可以很輕鬆的將之前的範例改寫，如下

```javascript
// utils.js

var author = 'Mr.A'

function getAuthor(){
    return author
}

module.exports.getAuthor = getAuthor
```

```javascript
// utils2.js

var moduleUtils = require('./utils')

var author = 'Mr.B'
var authorFromUtils = moduleUtils.getAuthor()

function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}

module.exports.getTwoAuthors = getTwoAuthors
```

```javascript
//main.js
var moduleUtils = require('./utils')
var moduleUtils2 = require('./utils2')

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

這樣寫相較 IIFE 簡單多了，但別忘了改成這樣子，實際上是沒辦法在瀏覽器上執行的，只能在 Node.js 環境下執行。既然瀏覽器不支援，要怎麼樣才能在瀏覽器執行？我們可以借助其他工具，也就是 Webpack，它會將我們的模組翻譯成瀏覽器支援的寫法，並且打包成一個壓縮過的 JS 檔。

不過在介紹 Webpack 之前，相信有些人會有疑惑，在寫專案都沒有使用 `require` 或 `module.exports` ，都是用 ES6 的 `import` 和 `export` ，而且瀏覽器也有支援，那為什麼還需要 Webpack？ 在回答這個問題之前，先來認識一下 ES6 Module。

## ES6 Module
在 ES6 以前，沒有正式的模組化規範，所以有各種模組化的寫法，像是上面介紹的 CommonJS，或是 AMD (Asynchromous Module Definition 非同步模組定義)等等。而 ES6 出來之後，終於有了正式的規範，就是上面提到的 `import` 與 `export`，我們可以再把上面的例子用 ES6 Module 改寫，如下

```javascript
// utils.js

let author = 'Mr.A'

export function getAuthor(){
    return author
}
```

```javascript
// utils2.js

import { getAuthor } from './utils.js'

let author = 'Mr.B'
let authorFromUtils = getAuthor()

export function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}
```

```javascript
//main.js
import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'

console.log(getAuthor()) // 'Mr.A'
console.log(getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

```html

<script src="./main.js" type="module"></script>
```

依照目前的使用情境，看起來都沒有什麼太大的問題，但假設我們想要使用別人的套件呢？或許我們可以使用 CDN 引入，但如果說這個套件也沒有 CDN，我們就只能透過 NPM 或 Yarn 這類型的套件管理工具來下載。

套件下載完畢後，會放到 node_modules 這個資料夾裡，這樣子我們引入的路徑就可能要改寫成 `'./node_modules/xxx/index.js'` 這樣子。假設哪天套件的入口點換了，整個專案有使用到這個套件的都需要改寫，這樣其實很不方便。除此之外，有些套件輸出是寫 `module.exports`，我們也沒辦法使用 `import` 來引入，因此這個時候，我們就需要藉由 Webpack 的幫助。

## Webpack 

### 初步認識 Webpack

在前面我們就有提到，Webpack 是一模組打包工具，不管我們是寫 CommonJS 又或是 ES6 Module 最終它會將我們的模組以及使用 NPM 安裝他人的模組一併打包成一個 JS 檔。接著讓我們來實際試試看如何使用 Webpack 打包。

如果上面的有跟著練習的話，目前的專案目錄會是這樣子

![](https://i.imgur.com/kyTltD4.png)

1.開啟終端機輸入下面兩行指令

```
npm init -y 
npm install webpack webpack-cli --save-dev
```
順利的話，就會看到我們的目錄新增了兩個檔案分別是 package.json 和 package-lock.json，以及 node_modules 的資料夾

![](https://i.imgur.com/6Q6pYCo.png)

2.打開 package.json 並在 scripts 底下新增指令

```javascript
// package.json
{
  "scripts": {
    "build": "webpack" 
  },
}
```

3.新增 webpack.config.js 檔案

```javascript
// webpack.config.js
module.exports = {
  mode: 'development', 
  entry: './main.js', // webpack 打包的起始檔案
  output: {
    path: __dirname, // 在這個 config 檔同層的目錄
    filename: 'bundle.js'// 打包輸出的檔名
  }
}
```

`mode` 這個屬性不寫的話預設會是 `production`，代表在生產環境下使用，所以會自動幫你壓縮以及優化。`development` 這個模式代表開發的時候，打包的速度較快。

最後在終端機下
```
npm run build
```
執行之後順利的話就會出現建置的成功訊息

![](https://i.imgur.com/0PHd1sN.png)

接著修改我們 index.html，將 main.js 換成 bundle.js

```html

<script src="./bundle.js"></script>
```

打開瀏覽器 console 之後，就會順利看到我們在 main.js 檔 `console.log` 的結果

![](https://i.imgur.com/D3euZqP.png)

這樣我們就成功地使用 Webpack 來幫我們把模組打包，不過目前為止我們還沒嘗試安裝套件來使用，接下來我們來試著安裝 React 

```
npm install react react-dom
```

安裝成功後，就來試試看能不能使用 React，並在畫面上印出 Hello, Webpack and React，所以將檔案做一下修改

```html


<body>
  <div id="root"></div>

  <script src="./bundle.js"></script>
</body>
```

```javascript
//App.js

import React from "react"

function App() {
  return React.createElement('h1', {}, "Hello Webpack and React")
}

export default App
```

```javascript
//main.js

import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'
import App from './App.js'
import ReactDom from 'react-dom'
import React from 'react'

const appEl = React.createElement(App)
ReactDom.render(appEl, document.getElementById('root'))

console.log(getAuthor())
console.log(getTwoAuthors())
```

最後我們再重新 build 一次

```
npm run build
```

成功看一下建置的訊息會發現，Webpack 的確有去 node_modules ，將我們使用的套件模組一併打包

![](https://i.imgur.com/g7wq0sX.png)

最後打開畫面，除了之前在 console 印出來的結果外，也可以看到 Hello, Webpack and React! 

![](https://i.imgur.com/iuKWUSM.png)

### 強大的 Webpack

Webpack 打包 JS 模組只是它功能的冰山一角，如果有看過 [Webpack 官網](https://webpack.js.org/) 可以看到首頁的這張圖：

![](https://i.imgur.com/44KtbCr.png)

Webpack 把任何資源都當作模組，像是 CSS 或是圖片，我們都可以用 `import` 的方式把檔案給引入進來，如果不使用 Webpack 是沒辦法做到的。而為了支援這樣子的功能，Webpack 透過定義不同的 `loader` 來識別檔案類型並轉譯成瀏覽器看得懂的語法。例如 `babe-loader` 能夠幫助我們將 ES6 以上的新語法轉譯成 ES5。除此之外，還可以透過 `plugins` 來擴充 Webpack 的功能，像是壓縮 CSS 檔，或是打包過後自動產生 HTML 等等。

 ## 結語
到這邊相信大家對 Webpack 應該有個基礎的認識了，也瞭解到為什麼需要使用 Webpack。回過頭來看在使用 creat-react-app 以及 Vue CLI，我們能夠輕鬆的 `import` CSS 或圖片，背後都是因為有 Webpack 在處理。 

最後，如果想要更加瞭解 Webpack，可以參考[ 五倍紅寶石學院 ](https://campus.5xruby.tw/courses)的[ Webpack5 入門 ](https://campus.5xruby.tw/p/webpack5)線上課程。

從模組化帶你認識 Webpack - post

從模組化帶你認識 Webpack

圖片上傳是一個在網路上隨處可見的功能，但是要做起來還真多細節在裡頭。

比方說：

客戶：「那可以預覽圖片嗎？」
客戶：「可以在上傳之前弄個裁切嗎？」
客戶：「可以一次上傳多張圖嗎？」
客戶：「可以拖曳上傳嗎？」

老闆：「加點要等哦～」

## 圖片上傳
圖片上傳可以使用套件來完成，我會推薦使用 [carrierwave](https://github.com/carrierwaveuploader/carrierwave)。

細節就跳過不講，總之我會先用產生器來生成一個 uploader。

```ruby
rails g uploader normal
```

會生成這樣的檔案：

```ruby
class NormalUploader < CarrierWave::Uploader::Base

  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end
```

store_dir 說明了圖檔會被存在哪個資料夾。在一個正常的開發環境下，上傳圖片成功後，你可以在 `/public` 資料夾下找到 uploads 資料夾。

以上傳使用者大頭照來說，我會在 User 上指定透過 image 這個欄位來儲存圖片路徑：

```ruby
class User < ApplicationRecord
  mount_uploader :image, NormalUploader
end
```

對應的 form 欄位大概是長這樣：

```ruby
<%= form_for(user) do |f| %>

...略

  <div class="field">
    <%= f.label : %>
    <%= f.file_field :image, id: 'add_image' %>
  </div>

...略

<% end %>
```

只要 image 的值是一個檔案或是一個網址，carrierwave 就會幫我們把圖存進指定的資料夾中。

## 圖片預覽

在古代，圖片預覽是不可能辦到的事，而現代大概有兩種做法：

### 透過 server

當用戶選擇一個圖檔後，先透過 ajax 上傳圖片到 server，而 server 將圖片儲存後，回傳圖片網址以及圖片 id，瀏覽器端使用 `<img src="圖片網址"/>` 來達成圖片預覽。

### 透過 base64

當用戶選擇一個圖檔後，透過 FileReader.readAsDataURL 獲得 base64 格式的檔案內容，使用 img ，在 src 填入 base64 字串，達成圖片預覽。 

透過 server 的好處是，實際上圖片早已存在 server 上，這表示在最終表單送出時，用戶就不需要等待圖片上傳了。

但是相對的，透過 server 的缺點是也許用戶上傳圖片後基於某些原因（也許是停電），他無法填完表單，這將導致 server 上將會存在一些被人們遺忘的圖片，而這些圖片需要定期清理。

透過 base64 達成圖片預覽的話，就比較簡單了。

透過 server 的做法應該很容易就能查到，我就不介紹了。

透過 base64 達成圖片預覽的寫法是這樣的：

```javascript
function file_to_base64(file, callback){
  var reader = new FileReader();
  reader.onload = function (e){
    callback(e.target.result);
  }
  reader.readAsDataURL(file);
}
```

這是一個丟入檔案進去會回傳 base64 格式回來的函數。

```javascript
$("#add_image").change(function(e){
  file_to_base64(e.target.files[0],function(base64){
    $("#preview").attr("src", base64);
  });
});
```

我們在當用戶上傳一張圖片後，將圖檔 `e.target.files[0]` 傳入 `file_to_base64`，獲得對應的 base64 字串後放進 img 就完成了，是不是很簡單呢？

## 圖片裁切

圖片裁切也有兩種做法，透過 server 以及透過 base64。

### 透過 server
當用戶選擇一個圖檔後，先做預覽圖片，然後在畫面上顯示一個裁切區域提供給用戶標記裁切位置，當用戶裁切完成時，將裁切座標儲存至 hidden field 並且透過 css 將預覽圖調整成裁切後的樣子。
在送出表單後圖片將會傳回 server，由 server 進行圖片裁切，通常這會是點陣圖檔的操作。

### 透過 base64
當用戶選擇一個圖檔後，先做預覽圖片，然後在畫面上顯示一個裁切區域提供給用戶標記裁切位置，當用戶裁切完成時，透過 canvas 進行裁切並取得對應的 base64 內容，將 base64 儲存至 hidden field 並將預覽圖的 src 值替換掉。
在送出表單後代表圖片的 base64 將會傳回 server，由 server 將 base64 轉存成圖片。

不管採用哪個做法，我們都需要使用裁切套件來協助我們取得裁切座標，我們這裡示範使用的套件是 [cropper](https://fengyuanchen.github.io/cropper/)。

### cropper 介紹

cropper 官方示範的裁切介面如圖中的左側區塊：

![裁切介面](//images.ctfassets.net/8er52l3j5u76/5II94lEUzICQHnqSEwD7bJ/4ac255300f3f42c9a26092b10933461d/2018-03-05_19.05.12.png)

他的用法也很簡單：

```javascript
$("img").cropper();
```

這樣寫就可以將一個 image 區塊變成一個裁切介面。

如果我們是這樣寫的話：

```javascript
$("#add_image").change(function(e){
  file_to_base64(e.target.files[0],function(base64){
    $("#preview").attr("src", base64).cropper();
  });
});
```

就會在上傳圖片後立即看到裁切介面。

然而我們不只需要一個裁切介面，我們可以做成點擊預覽圖後跳出一個裁切介面，並且包含一個`好哦～`按鈕，當按下`好哦～`時，將裁切介面關閉，並且把裁切數據保留。

我們可以把這樣的工作做成一個函數，讓我們傳入預覽圖片的 base64 值，並且在指定位置下生成裁切區域，在裁切之後將裁切資訊以 callback 傳回。

```javascript
var crop_zone_html = `<div class="crop_zone">
  <img />
  <button class="ok" data-turbolinks="false">好哦～</button>
</div>`;

function crop_for_base64(base64, container, callback){
  var crop_zone = $(crop_zone_html);
  var cropping_img = crop_zone.find("img");
  cropping_img.attr("src", base64).cropper();
  container.append(crop_zone);
  crop_zone.find(".ok").click(function(){
    var base64 = $(cropping_img).cropper('getCroppedCanvas').toDataURL('image/png');
    var cropbox = $(cropping_img).cropper('getCropBoxData');
    callback({base64:base64, cropbox:cropbox});
    $(this).parent().remove();
  });
}
```

我們使用一個樣板字串 `crop_zone_html` 去做出裁切區域，裡面包含一個 img 和一個按鈕。

把 base64 值傳入後，設定到空的 image tag 上再呼叫 `cropper()`，裁切區域就完成了。

當 OK 按鈕被按下後，我們就從 cropper 中擷取對應的 base64 值傳回給 callback，並結束裁切介面。

以下是使用情境：

```javascript
$("#add_image").change(function(e){
  file_to_base64(e.target.files[0],function(base64){
    $("#preview").attr("src", base64).click(function(){
      var preview_img = $(this);
      crop_for_base64(base64, $("#for_cropper"), function(crop_data){
        preview_img.attr("src", crop_data.base64);
      });
    });
  });
});
```

我們在點擊預覽圖片後會去呼叫前面寫好的 crop_for_base64 函數。在每次裁切後會將 base64 設定回預覽圖，結果當然是完美的。剩下來的問題就是如何將結果傳回 server。

那麼以下將示範如何將 base64 傳回並且串接到 carrierwave。

### 透過 base64 裁切
#### 上傳 base64

當我們選擇將 base64 的圖檔傳回 server 時，我們就已經不再需要原本的 file field 了。所以我們可以改成用一個 hidden field 去保存 base64。

model：

```ruby
attr_accessor :base64_image
```

form：

```ruby
<%= f.hidden_field :base64_picture, id:"base64_image_field" %>
```

js：

```javascript
$("#add_image").change(function(e){
  file_to_base64(e.target.files[0],function(base64){
    $("#base64_image_field").val(base64);
    $("#preview").attr("src", base64).click(function(){
      var preview_img = $(this);
      crop_for_base64(base64, $("#for_cropper"), function(crop_data){
        $("#base64_image_field").val(crop_data.base64);
        preview_img.attr("src", crop_data.base64);
      });
    });
  });
});
```

這樣 base64 就會存在 hidden field 裡，前端的部分這樣就完成了，接下來是在後端收到 base64 後該如何串接 carrierwave 的問題。

#### base64 與 carrierwave 串接

簡單的想法是 carrierwave 可以接受檔案的格式，所以我們應該先將圖片存成檔案，再傳給 carrierwave。不過，我們可能不想因為存個檔就產生一個暫存檔。如果他可以只存在記憶體，不產生實體檔案，那就更理想了。

直接使用 StringIO 是個不錯的想法，不過我決定要繼承 StringIO。

目標程式：

```
image = Base64ImageStringIO.new(base64_image)
```

希望經過一個轉換後將 base64 轉換為 StringIO 的樣子讓 carrierwave 能夠進行存檔工作。

完整的 Base64ImageStringIO 的寫法如下：

```
class Base64ImageStringIO < StringIO
  REGEXP = /\Adata:([-\w]+\/[-\w\+\.]+)?;base64,(.*)/m

  def initialize(base64_image)
    @extension = '.png'
    super(base64_to_binary(base64_image))
  end
  def original_filename
    @original_filename ||= "#{SecureRandom.uuid}.#{@extension}"
  end

  def base64_to_binary(base64_image)
    data_uri_parts = base64_image.match(REGEXP)
    return nil if data_uri_parts.nil?
    @extension = MIME::Types[data_uri_parts[1]].first.preferred_extension
    Base64.decode64(data_uri_parts[2])
  end
end
```

在建構時，先假設所有圖片都是 png，並且將 base64 轉換為 binary 再丟給 StringIO 的建構式。

關於檔名的部分，程式會隨機生成一個檔案名稱，並且確保副檔名binary 中的內容相同。carrierwave 會自動抓取 original_filename 的值做為檔案名稱。

這就是完整的圖片裁切流程。

如果是上傳多張圖片再加上裁切，同時還要考慮更新資料時舊圖片跟新圖片的處理，那情況就更複雜了，不過跟透過 server 裁切的方法比起來，我覺得還是各有利弊啦。

### 透過 server 裁切

如果是透過 server 裁切的話，前端就要將 cropbox 資訊透過 hidden field 傳到後端。

可以讓 carrierwave 幫我們做點事：

```
class CropUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  process :crop

  def crop
    if model.crop_attributes.present?
      cropbox = JSON.parse(model.crop_attributes)
      manipulate! do |img|
        x = cropbox["x"].to_i
        y = cropbox["y"].to_i
        w = cropbox["w"].to_i
        h = cropbox["h"].to_i
        # example: mogrify +repage -crop 1x2+3+4 file_patch
        img.combine_options do |c|
          c.repage.+
          c.crop("#{w}x#{h}+#{x}+#{y}")
        end
      end
    end
  end
end
```

其他的部分就不多說了，最難的部分就是這個 crop，其中：

```
include CarrierWave::MiniMagick
```

需要 gem "mini_magick" 以及 brew install imagemagick。

```
process :crop
```

這是一個 callback，會在圖片儲存前給你一個機會對圖片做事。所以只要前端傳遞一個矩形座標到後端就能切圖。這裡就先隨便用 1、2、3、4 做為代表。

```
img.crop("#{w}x#{h}+#{x}+#{y}")
```

這個 crop 方法會被轉為系統指令

```
mogrify -crop 3x4+1+2 file_path
```

mogrify 是 imagemagick 提供的指令，可以拿它來切圖。

說明書在這裡：[https://www.imagemagick.org/script/mogrify.php](https://www.imagemagick.org/script/mogrify.php)

一切運作良好，直到我遇到這張圖：

![Color](//images.ctfassets.net/8er52l3j5u76/5y0sRh2MpA7Y3jhO5SvpN2/1fcfd88241682837c7b9f67193441114/color_18_3_lg.png)

怎麼切位置都是錯的。

強者我同事爬了一下文，發現是 ImageMagick 支援叫做 Virtual Canvas （虛擬圖層？）的資訊，這種東西其實是圖片的 Metadata 的一部分。

把出問題那張圖片拿去解析 Metadata會發現

```
Image Offset: 54, 64
```

也就是 ImageMagick 發現他有設定位移，所以就照這個設定去裁切了。然後用 +repage 可以讓他把 Offset 設回 0,0

所以這是我們的目標指令：

```
mogrify +repage -crop 3x4+1+2 file_path
```

但 ruby 是要這樣寫：

```
img.combine_options do |c|
  c.repage.+
  c.crop("#{w}x#{h}+#{x}+#{y}")
end
```
因為有兩個以上的參數，所以需要用 combine_options 去串接參數。
```
c.repage.+
```
會生成出
```
+repage
```

事實上他會把函數名稱拿去當作參數名稱，如果我這樣寫：

```
img.combine_options do |c|
  c.jsdiofaodj.+
  c.crop("#{w}x#{h}+#{x}+#{y}")
end
```

他就會嘗試執行

```
mogrify +jsdiofaodj -crop 199x154+234+343 file_path
```

如果把 .+ 拔掉：

```
img.combine_options do |c|
  c.jsdiofaodj
  c.crop("#{w}x#{h}+#{x}+#{y}")
end
```

就會變成

```
mogrify -jsdiofaodj -crop 199x154+234+343 file_path
```

如果調換順序：

```
img.combine_options do |c|
  c.crop("#{w}x#{h}+#{x}+#{y}")
  c.repage.+
end
```

會變成

```
mogrify -crop 3x4+1+2 +repage file_path
```

你可能會想說，參數順序有差嗎？還真的有差。

因為他不是參數順序，而是執行順序。

總而言之，強者我同事守護了世界的和平。

還是切雞排容易多了。

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-老闆來一份上傳圖片要切/cover

老闆來一份上傳圖片要切


# 專案管理起步走：五件重要的小事

最近因為參加聚會聽到了在不同領域擔任專案管理的分享，談到專案管理過程中幾個共通的問題，剛好趁這個機會，想回顧一下，這兩年內學會了什麼，心態上又改變了什麼？於是整理出五件我覺得改變我工作方式的重要小事

1. 事情分輕重緩急，追蹤問題
2. 學習談判，細心與耐心
3. 專案的建議，但把選擇權交回客戶
4. 建立團隊從小原則開始
5. 抓好時間管理，讓客戶感受到被重視

### 1. 事情分輕重緩急，追蹤問題

> 剛開始做 PM 工作的第一個月，每一封信每一個對話我都回的戰戰兢兢，深怕遺漏掉任何事情，只要客戶一問「這東西進度怎麼樣啦？」我就會緊張的跑到工程師旁邊問他所以進度怎麼樣，弄的大家都很緊張...

雖然說工作上是以客為尊，快速的回應會讓顧客有好印象，但若只為了這樣而中斷自己甚至工程師的工作時，就可以停下來想一下客戶提出來的問題是不是真的這麼的迫切？

適時的讓客戶知道，我們已經收到你提出來的疑問了，並且會盡快為他處理這些問題
也因此 PM 身上也會一串長長的追蹤事項，每天固定找一個時間，重新檢視一次今天需要追蹤的問題，把處理掉的問題劃掉，

### 2. 學習談判，細心與耐心

PM 其中一個重要的工作在於如何溝通協調，對外我們要判斷需求，並適時的給予客戶專業建議、對內需要學著跟工程師協調任務的先後順序，這也是為什麼大家常說 PM 學著說不同的話，在面對不同領域的人有著不一樣的腦袋，如何聽懂對方的話、使彼此交流順常，找出最適的解決方案，溝通是專案管理最重要的軟實力。

關於協調與談判，我自己的心得是可以從耐心的傾聽以及換位思考開始練習，在 <卡內基溝通與人際關係：如何贏取友誼與影響他人> 書中，戴爾‧卡內基（Dale Carnegie）曾提到，假如你在職場上只學會一樣東西，就是能從自己與別人的角度思考、去看事情，那很有可能是你人生、事業成功的踏腳石。

### 3. 專案的建議，但把選擇權交回客戶

>「這樣不行，那樣不好，不然你告訴我你覺得怎麼樣才行？」

從第二點延伸，許多時候客戶會提出不太明確的需求或是天馬行空的想法，在我們傾聽完客戶的需求後，對於一些複雜的需求我們可能將需求帶回去在和工程師討論可行的方案，而最後我們可以怎麼呈現給客戶？

在想解決方案的過程中透過換位思考的方式，重新站在客戶考量他的需求，這裡的需求有時不單只是產品需求，還有成本、時間的考量也要加在這當中，透過提案的方式，列出可行的解決方案的優缺點後、需要開發的時間、成本後，將最後的選擇權交回給客戶。

透過良好的表達方式呈現我們解決問題的專業，同時也尊重客戶的選擇，除了能把問題解決之外最重要的是贏得客戶的信任。做 PM 給我一個很大的訓練是，我們得先聽懂並且了解對方的需求，在以專業的建議表達自己的需求，從中找尋交集的解決方式，就可以創造雙贏。

### 4.  建立團隊從小原則開始

理想上我們都希望能待在一個好的團隊，團隊裡的成員會自發性的去學習、並且積極地完成工作。但有時就算很幸運的遇上一群擁有很高熱忱的成員，若能有一些小的原則在這團隊當中發酵，更能將大家的力量凝結起來，發揮團隊最大的作用。

我覺得可以從每日的站立會議開始

站立會議其實是 Scrum（敏捷軟體開發過程）中的一部份，但我自己的心得是不一定只能用在 Scrum 的專案中 (畢竟不是每個專案都適合 scrum) ，每日的站立會議，能夠讓團隊成員有更多時間專注在工作上，同時也讓 PM 更輕鬆、即時地掌握實際情報

有效的站立會議我覺得有幾個要點：

  *  每天固定的時間
  *  會議時間不超過 15 分鐘
  *  一次只有一個人發言，並只針對三個重點說明，包括「昨天完成了哪些任務」、「今天的預計要執行的任務」、「碰到的問題」
  *  遠端的工程師可使用一些視訊軟體輔助，一樣可以參加站立會議

PM 在這當中有點像是引導者，透過發問的方式，讓團隊成員們慢慢的熟悉站立會議的模式，同時也讓自己更能掌握實際的狀況。

### 5. 要讓客戶感受到被重視

由於 PM 身上可能會不只處理一個專案，如何在不同專案之間做好顧客關係管理，我想很大一部分跟時間管理有關係。

在第一點時我提到了事情要分輕重緩急，分完後依序地處理每件事情之外，另外也可以透過一些工作摘要整理成進度跟客戶做回報，表現出主動追蹤處理問題的態度，重點式的回報進度給客戶，客戶在知道專案狀況後通常會比較放心。

許多時候 PM 除了專注於管理專案的進度之外，也需要服務客戶的心理狀態，讓客戶放心也感受到備受重視

### 最後，我對 PM 工作的想法

專案管理有趣卻也困難的是在於許多事情沒有完美或唯一正確的解答，只有能被大家接受的解決方法，當 PM 需要學會在這灰色地帶中透過有效的溝通作出決定，並學習接受現實世界中不可能滿足所有人的狀況下，如何使專案能夠向前推進。


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

專欄文章

最新消息

從模組化帶你認識 Webpack

老闆來一份上傳圖片要切

專案管理起步走：五件重要的小事

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

部落格

專欄文章

最新消息

幫助與政策

常見問題

隱私權政策

服務條款