JavaScript中的圖片處理與合成(一)

引言：

圖片處理現在已經成為了我們生活中的剛需，想必大家也經常有這方面的需求。實際前端業務中，也經常會有很多的專案需要用到圖片加工和處理。由於過去一段時間公司的業務需求，讓我在這方面積累了一些乾貨，趁著年後這段時間總結成一系列文章與大家分享，希望能對各位努力中的前端童鞋帶來啟發和幫助~~~?

本系列分成以下4個部分:

• 基礎型別圖片處理技術之縮放與裁剪(傳送門)；
• 基礎型別圖片處理技術之圖片合成(傳送門)；
• 基礎型別圖片處理技術之文字合成；
• 演算法型別圖片處理技術(傳送門)；

文章中，我會提到很多在實際實踐中所遇到的坑或者經驗，應該算是乾貨滿滿~~如果能通讀，應該能大大提升對前端圖片處理領域的理解，有感興趣的童鞋可以與我深入討論，希望本文能達到拋磚引玉的效果，讓前端在影象處理方面有更多的可能性，有不足之處望請諒解。

通過這些積累，我封裝了幾個專案中常用的功能：

圖片合成: Example Git

圖片裁剪: Example Git

人像摳除: Example Git

嘮叨完這些老套路後，我們開始起飛！~~✈️✈️✈️

首先，我這裡將前端圖片處理暫且分成兩種型別：基礎型別 與 演算法型別；

• 基礎型別的圖片處理技術: 圖片縮放，旋轉，新增邊框，圖片合成，拼圖等業務都屬於基礎型別的圖片處理，其區分點在於無需使用畫素級別的演算法，而是通過計算改變圖片的尺寸及位置等來改造圖片。例如常用的貼紙功能:

• 演算法型別的圖片處理: 這型別的圖片處理複雜度較高，特點是通過畫素級別演算法對圖片的畫素點進行RGBA通道值等進行改造，例如我們使用photshop或者美圖秀秀等工具對圖片進行的 美顏 / 濾鏡 / 黑白 / 摳圖 / 模糊等操作，這型別的重點主要在於演算法和效能層面。例如常用的妝容功能:

本系列首先從基礎型別處理開啟我們的旅程。基礎型別的圖片處理在實際專案中有著大量的使用場景，主要是運用canvas的能力來完成，不存在效能和相容性問題，能夠達到線上執行標準。我這裡將基礎型別的圖片處理大致的分成以下幾種型別，這些型別基本能覆蓋日常所有業務場景：

• 圖片的縮放；
• 圖片的裁剪；
• 圖片的合成；
  • 圖片與圖片的合成，例如貼紙，邊框，水印等；
  • 為圖片新增文字；
  • 為圖片新增基礎幾何圖形；

Tips: 我已將該型別的圖片處理場景封裝成了一個外掛，基本上能應付所有這型別圖片處理的需求，GIT地址 (歡迎探討);

在介紹具體的功能前，由於圖片的繪製完全的依賴於圖片的載入，因此先來了解一些前置知識。

1、圖片的跨域

首先，圖片載入並繪製涉及了圖片的跨域問題，因此如果是一張線上的圖片，需要在圖片伺服器上設定跨域頭，並且在前端載入圖片之前將<img>標籤的crossOrigin設定為*，否則繪製到畫布的時候會報跨域的錯誤。

Tips: 這裡積累了一些小坑，可以跟大家分享下：

1、crossOrigin需要嚴格設定，既只有是線上圖片時，才設定，而本地路徑或者base64時，則一定不能設定，否則在某些系統下會報錯，導致圖片載入失敗；

2、當專案為本地包環境時，例如內建於 App中時，crossOrigin值無效，**webview的安全機制會導致無論該值設定與否，都會報跨域的錯誤。解決辦法是：需要將所有圖片轉換成base64**才能正確繪製；

3、crossOrigin值一定要在圖片載入之前設定，即為<img>賦值src之前進行設定，否則無效；

2、圖片的載入

由於canvas的繪製需要的是已經載入完成的圖片，我們需要確保繪製的素材圖片是已經載入完成的，因此我們需要使用<img>的onload事件，可以使用html中已存在的圖片，或者用js建立一個圖片物件:

function loadImage(image, loader, error){
	// 建立 image 物件載入圖片；
	let img = new Image();
	
	// 當為線上圖片時，需要設定 crossOrigin 屬性；
	if(image.indexOf('http') == 0)img.crossOrigin = '*';
	img.onload = () => {
	    loaded(img);
	    
	    // 使用完後清空該物件，釋放記憶體；
	    setTimeout(()=>{
	        img = null;
	    },1000);
	};
	img.onerror = () => {
	    error('img load error');
	};
	img.src = image;
}
複製程式碼

介紹圖片載入的前置知識後，我們先來看最簡單的圖片處理---縮放與裁剪！

Tips: 相信大家閱讀本文時，如果對canvas不太瞭解，可以查詢下對應的API文件即可，本文不再對canvas基礎API做詳細講解。

一、圖片的縮放

圖片的縮放最常見的場景是做圖片的壓縮。在保證圖片清晰的前提下通過合理地縮小圖片尺寸，能大大的降低圖片的大小。在實際應用場景中，有著廣泛的用途。例如圖片上傳時，使用者自主上傳的圖片可能是一張非常大的尺寸，例如現在手機所拍攝的照片尺寸經常能達到1920*2560的尺寸,大小可能超過5M。而在專案中，我們可能並不需要用到這麼大的尺寸，此時對圖片的壓縮能大大的優化載入速度和節省頻寬；

1、新建一個canvas畫布，將寬高設定為需要壓縮到的尺寸;

該畫布既為圖片縮放後的尺寸，此處有個點是需要保證圖片的比例不變, 因此需要通過計算得出畫布的寬與高：

let imgRatio = img.naturalWidth / img.naturalHeight;

// 建立一個畫布容器；
let cvs = document.createElement('canvas');

// 獲取容器中的畫板；
let ctx = cvs.getContext('2d');
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;
複製程式碼

2、將圖片畫入後再匯出成base64;

這裡使用2個最常用的方法:

• ctx.drawImage(image, dx, dy, dw, dh): 這個方法其實最多可以接收9個引數, 實現壓縮，只需要使用其中的5個引數即可, 其餘引數在其它部分使用到時再做詳解；

  • image : 需要繪製的圖片源，需要接收已經 載入完成 的HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement；
  • dx / dy : 相對於畫布左上角的繪製起始點座標；
  • dw / dh : 繪製的寬度和高度，寬高比例並不鎖定，可使圖片變形；

• cvs.toDataURL(type, quality): 該方法用於將畫布上的內容匯出成 base64 格式的圖片，可配置2個引數；

  • type: 圖片格式, 一般可以使用 image/png 或者 image/jpeg, 當圖片不包含透明時，建議使用jpeg，可使匯出的圖片大小減小很多；

  Tips: 此處有個坑, 想匯出jpg格式的圖片必須用image/jpeg，不能使用image/jpg；

  • quality: 圖片質量，可使用0~1之間的任意值；經過測試，該值設定成0.9時較為合適，可以有效減小圖片檔案大小且基本不影響圖片清晰度，匯出後的 base64 既為壓縮後的圖片；

// 將原圖等比例繪製到縮放後的畫布上；
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

// 將繪製後的圖匯出成 base64 的格式；
let b64 = cvs.toDataURL('image/jpeg', 0.9);
複製程式碼

3.多種格式的圖片轉換成base64;

我們常用的圖片上傳功能，我們使用的是原生的<input type="file">標籤，此時獲取到的是File格式的圖片，圖片的格式各異且尺寸很大，我們應該壓縮處理後再使用。

• 使用FileReader:

let file = e.files[0];   
if(window.FileReader) {       
	let fr = new FileReader();      
	fr.onloadend = e => {
		let b64 = e.target.result;
		
		// b64即為base64格式的使用者上傳圖;
	};       
	fr.readAsDataURL(file);
}
複製程式碼

• 對base64的圖片使用剛才的canvas方式進行壓縮的處理；

Tips: 這裡有個小坑是，圖片的EXIF資訊中的方向值會影響圖片的展示，在IOS會出現圖片的寬高與圖片的方向不匹配的問題，因此需要進行特殊處理，矯正圖片的方向。方案:

1、可以使用 exif.js 來獲取圖片資訊中的Orientation屬性，利用canvas的旋轉繪製來矯正；

2、這裡有個 canvasResize.js 外掛，可以解決從 File 到 base64 的所有問題。

二、圖片的裁剪

在實際專案中，由於圖片的寬高比例各式各樣，而展示和使用一般需要一個較為固定的比例，此時便需要將圖片裁剪成我們需要的寬高比例，使用到的方式其實和圖片的縮放基本一致，主要是通過調整 drawImage 的dx, dy引數來實現。原理其實是，將drawImage的繪製起始點(dx, dy)向上偏移，此時由於canvas已被我們設定成期望裁剪後的尺寸，而超出畫布的部分不會繪製，從而達到裁剪的目的；通過靈活的設定值，基本可以完成各種圖片裁剪需求，簡單示例圖(黑色框代表建立的畫布的尺寸):

此處以需要將一張600*800的長方形圖豎直居中裁剪為600*600的正方形圖為例, 簡單封裝成一個功能函式:

// 使用方式：
let b64 = cropImage(img, {
    width : 600,
    height : 600,
});

// 居中裁剪
function cropImage(img, ops){
	// 圖片原始尺寸；
	let imgOriginWidth = img.naturalWidth,
        imgOriginHeight = img.naturalHeight;
        
    // 圖片長寬比，保證圖片不變形；
    let imgRatio = imgOriginWidth / imgOriginHeight;
    
    // 圖片裁剪後的寬高， 預設值為原圖寬高；
	let imgCropedWidth = ops.width || imgOriginWidth,
        imgCropedHeight = ops.height || imgOriginHeight;
        
    // 計算得出起始座標點的偏移量, 由於是居中裁剪，因此等於 前後差值 / 2；
	let dx = (imgCropedWidth - imgOriginWidth) / 2,
		dy = (imgCropedHeight - imgOriginHeight) / 2;

    // 建立畫布，並將畫布設定為裁剪後的寬高；
	let cvs = document.createElement('canvas');
	let ctx = cvs.getContext('2d');
	cvs.width = imgCropedWidth;
	cvs.height = imgCropedHeight;
	
    // 繪製並匯出圖片；
	ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio);
	return cvs.toDataURL('image/jpeg', 0.9);
}
複製程式碼

三、圖片的旋轉

圖片的旋轉的原理同樣也是將圖片繪製到畫布上進行旋轉後再匯出。其實使用到的是canvas的rotate方法；

let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');

// 將參照點移動到畫板的中心點；
ctx.translate(ctx.width/2, ctx.height/2);
// 旋轉畫板；
ctx.rotate = 90;
// 繪製圖片；
ctx.drawImage(img);
// 匯出得到旋轉後的圖片；
cvs.toDataURL();
複製程式碼

這裡有個比較特別的部分，就是這裡旋轉的是畫布的畫板部分，並不是整個畫布容器，而畫布容器外面不會被繪製，因此這裡就會出現一個影象四個角被裁剪掉的問題:

解決的方式就是:

將畫布容器放大，變成:

上面這個例子中，由於圖片是正方形，因此將容器的寬高放大1.5倍便可保證圖片不會被裁剪，而現實中的圖片由於寬高比例不定，因此這個放大係數是一個動態的值:

Tips: 由於我們將畫板基點移動到畫布中心了，因此在繪製的時候，要相對於基點調整 dx 與 dy;

// 建立畫布，獲取畫板；
...

// 放大係數為
let iw = img.width, ih = img.height;
let ir = iw > ih ? iw / ih : ih / iw;

cvs.width = iw * ir * 1.5;
cvs.height = ih * ir * 1.5;
// 將參照點移動到畫板的中心點；
ctx.translate(cvs.width/2, cvs.height/2);
// 旋轉畫板；
ctx.rotate = 90;

// 繪製圖片；
ctx.drawImage(img, -cvs.width/2, -cvs.height/2);

// 匯出圖片；
...

複製程式碼

總結

本文主要介紹了一些前端圖片處理的前置知識:

• 圖片處理技術分類；
  • 基礎型別圖片處理技術；
  • 演算法型別圖片處理技術；
• 圖片的跨域；
• 圖片的載入；

還有講解了屬於基礎型別圖片處理中最簡單的兩類:

• 圖片的縮放；
• 圖片的裁剪；
• 圖片的旋轉；

相信大家已經對圖片的處理有了個大致的瞭解了。下篇文章，我們將繼續深入研究基礎型別中的圖片合成，也是各種乾貨滿滿，美不勝收~~???。

最後，非常感謝各位童鞋的閱讀，有何建議或者疑惑，可以隨時與我討論哈~~