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

引言：

圖片處理如今已經成爲了咱們生活中的剛需，想必你們也常常有這方面的需求。實際前端業務中，也常常會有不少的項目須要用到圖片加工和處理。因爲過去一段時間公司的業務需求，讓我在這方面積累了一些乾貨，趁着年後這段時間總結成一系列文章與你們分享，但願能對各位努力中的前端童鞋帶來啓發和幫助~~~😃html

本系列分紅如下4個部分:前端

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

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

經過這些積累，我封裝了幾個項目中經常使用的功能：github

圖片合成: Example Git

圖片裁剪: Example Git

人像摳除: Example Git

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

首先，我這裏將前端圖片處理暫且分紅兩種類型：基礎類型 與 算法類型；算法

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

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

本系列首先從基礎類型處理開啓咱們的旅程。基礎類型的圖片處理在實際項目中有着大量的使用場景，主要是運用canvas的能力來完成，不存在性能和兼容性問題，可以達到線上運行標準。我這裏將基礎類型的圖片處理大體的分紅如下幾種類型，這些類型基本能覆蓋平常全部業務場景：canvas

圖片的縮放；
圖片的裁剪；
圖片的合成；
- 圖片與圖片的合成，例如貼紙，邊框，水印等；
- 爲圖片添加文字；
- 爲圖片添加基礎幾何圖形；

Tips: 我已將該類型的圖片處理場景封裝成了一個插件，基本上能應付全部這類型圖片處理的需求，GIT地址 (歡迎探討);跨域

在介紹具體的功能前，因爲圖片的繪製徹底的依賴於圖片的加載，所以先來了解一些前置知識。安全

一、圖片的跨域

首先，圖片加載並繪製涉及了圖片的跨域問題，所以若是是一張在線的圖片，須要在圖片服務器上設置跨域頭，而且在前端加載圖片以前將<img>標籤的crossOrigin設置爲*，不然繪製到畫布的時候會報跨域的錯誤。服務器

Tips: 這裏積累了一些小坑，能夠跟你們分享下：

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

二、當項目爲本地包環境時，例如內置於 App中時，crossOrigin值無效，**webview的安全機制會致使不管該值設置與否，都會報跨域的錯誤。解決辦法是：須要將全部圖片轉換成base64**才能正確繪製；

三、crossOrigin值必定要在圖片加載以前設置，即爲<img>賦值src以前進行設置，不然無效；

二、圖片的加載

因爲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作詳細講解。

1、圖片的縮放

圖片的縮放最多見的場景是作圖片的壓縮。在保證圖片清晰的前提下經過合理地縮小圖片尺寸，能大大的下降圖片的大小。在實際應用場景中，有着普遍的用途。例如圖片上傳時，用戶自主上傳的圖片多是一張很是大的尺寸，例如如今手機所拍攝的照片尺寸常常能達到1920*2560的尺寸,大小可能超過5M。而在項目中，咱們可能並不須要用到這麼大的尺寸，此時對圖片的壓縮能大大的優化加載速度和節省帶寬；

一、新建一個`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;
複製代碼

二、將圖片畫入後再導出成`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會出現圖片的寬高與圖片的方向不匹配的問題，所以須要進行特殊處理，矯正圖片的方向。方案:

一、可使用 exif.js 來獲取圖片信息中的Orientation屬性，利用canvas的旋轉繪製來矯正；

二、這裏有個 canvasResize.js 插件，能夠解決從 File 到 base64 的全部問題。

2、圖片的裁剪

在實際項目中，因爲圖片的寬高比例各式各樣，而展現和使用通常須要一個較爲固定的比例，此時便須要將圖片裁剪成咱們須要的寬高比例，使用到的方式其實和圖片的縮放基本一致，主要是經過調整 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);
}
複製代碼

3、圖片的旋轉

圖片的旋轉的原理一樣也是將圖片繪製到畫布上進行旋轉後再導出。其實使用到的是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);

// 導出圖片；
...

複製代碼

總結

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

圖片處理技術分類；
- 基礎類型圖片處理技術；
- 算法類型圖片處理技術；
圖片的跨域；
圖片的加載；

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

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

相信你們已經對圖片的處理有了個大體的瞭解了。下篇文章，咱們將繼續深刻研究基礎類型中的圖片合成，也是各類乾貨滿滿，美不勝收~~😂😂😂。

最後，很是感謝各位童鞋的閱讀，有何建議或者疑惑，能夠隨時與我討論哈~~