微信小程序 canvas 實現圖片拉伸、壓縮與裁剪

注意：本文轉載自https://blog.csdn.net/vivian_jay/article/details/68933161

 

一、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) } } }