前言：
我們在網頁中經常會用到圖片展示，通常情況下會給一個固定的寬高來顯示這個圖片，然而從伺服器端上傳的圖片大小是不確定的，如果直接按預設填充這個框有時候就會特別醜orz。作為一個完(wai)美(mao)主(xie)義(hui)者，讓圖片們儘可能優美地展現在網頁上是一個很愉悅的責任。
今天就給太瘦小圖片們伸展伸展或者給XXXL號減減肥吧(～￣▽￣)～

一、canvas繪圖API

工欲善其事；必先利其器。
隆重請出主角：canvas繪圖函式drawImage()，醬醬醬~

它能做什麼：
1. 繪製圖像：將載入的影象繪製到canvas上；
2. 繪製畫布：將畫好的一個canvas畫到另一個canvas上；
3. 繪製視訊：差不多就是用來視訊截圖，哇(@ο@) 好厲害。

怎麼做（敲黑板：今天只教繪製圖像啊，老師沒備課）：
1. 獲取圖片

//1. 可以直接獲取DOM元素
var img = document.getElementById("imgId")
//2. 或者新建一個
var img = new Image()
img.src = "imgsrc.jpg"

1. 獲取canvas上下文

//1. 獲取畫布
var canvas = document.getElementById("canvasId")
//2. 獲取畫布上下文
var ctx = canvas.getContext("2d")

1. 在上下文畫畫！

img.onload = function
 
(){
    ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
}

引數釋義：
drawImage有三種新增引數的情況，如下：

1. 只規定原始圖片開始剪下的位置，預設填充剩餘寬高到畫布上：

drawImage(img,sx,sy)

1. 從指定位置裁剪原始圖片指定寬高，填充到畫布上：

drawImage(img,sx,sy,swidth,sheight)

1. 從指定位置裁剪原始圖片指定寬高，從指定位置開始顯示到畫布上指定寬高：

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
 

這裡盜個圖解釋一下：

二、拉伸並圖片

原始圖片的寬高較之顯示區域較小，就需要美美地拉伸一下。

1. 原始圖片寬高均小於顯示區域
預設情況下會將原始圖片的寬高都扯開成剛好鋪滿畫布。這個就不管了，讓它自由填充吧，freedom~

2. 原始圖片僅寬度小於顯示區域：黃色img，藍色canvas

預設情況會將圖片寬度拉伸，高度壓縮，圖片會被壓得很~扁~
思路：將原始圖片寬度拉開成現實區域寬度，而將高度等比例拉開，並且將超出部分上下各剪裁一半。

函式引數設定如下：

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

3.原始圖片僅高度小於顯示區域：

預設情況會將圖片高度拉伸，寬度壓縮，圖片內容會被擠得很~細~
思路：將原始圖片高度拉開成現實區域寬度，而將寬度等比例拉開，並且將超出部分左右各剪裁一半。

引數設定如下：

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

三、壓縮並裁剪圖片

原始圖片的寬高較之顯示區域較大，就需要小小地壓縮一下。

基本思路：在原始圖片的寬高均大於顯示區域時，首先需要確定我們以寬/高中的哪一個為基準進行壓縮，因此需要計算原始圖片的寬/高與顯示區域的寬/高的比例，以比例高（也就是相差小）的那個作為基準，等比例壓縮後相差多的那個需要裁減掉一部分。

1. dw < dh

預設情況會將圖片高度、寬度分別按各自的比例壓縮，圖片內容會被拉得很~扁~
思路：將原始圖片寬度壓縮成現實區域寬度，而將高度等比例拉開，並且將超出部分上下各剪裁一半。【同拉伸情況2】

函式引數設定如下：

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

2. dh < dw

預設情況會將圖片高度、寬度按各自比例壓縮，圖片內容會被擠得很~細~
思路：將原始圖片高度拉開成現實區域寬度，而將寬度等比例拉開，並且將超出部分左右各剪裁一半。【同拉伸情況3】

引數設定如下：

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

四、小結

其實不管是先拉伸再裁剪還是先壓縮再裁剪，基本思想都是一樣的：把圖片從預設的填充比例中拯救出來，讓它能等比例地變換大小，避免被奇怪的縮放比例搞得顏值比較奇怪。本文中的預設情況均是指直接使用img標籤上傳圖片的情況，相當於：

ctx.drawImage(img,0,0,w,h,0, 0, 300, 200)

劃重點！上文中的程式碼綜合如下：

var canvas = $(".good-img")[0]
var ctx = canvas.getContext("2d")
var img = new Image()
img.src = "images/3.jpg"
img.onload = function () {
    var w = img.width
    var h = img.height
    var dw = 300/w          //canvas與圖片的寬高比
    var dh = 200/h
    var ratio       
    // 裁剪圖片中間部分
    if(w > 300 && h > 200 || w < 300 && h < 200){
        if (dw > dh) {
            ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)
        } else {
            ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)
        }
    }
    // 拉伸圖片
    else{
        if(w < 300){
            ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)
        }else {
            ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)
        }
    }
}