JavaScript如何實現圖片處理與合成
引言:
圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的專案需要用到
圖片加工和處理。
首先,我這裡將前端圖片處理暫且分成兩種型別:基礎型別 與 演算法型別;
- 基礎型別的圖片處理技術: 圖片縮放,旋轉,新增邊框,圖片合成,拼圖等業務都屬於基礎型別的圖片處理,其區分點在於無需使用畫素級別的演算法,而是通過計算改變圖片的尺寸及位置等來改造圖片。例如常用的貼紙功能:
- 演算法型別的圖片處理: 這型別的圖片處理複雜度較高,特點是通過畫素級別演算法對圖片的畫素點進行RGBA通道值等進行改造,例如我們使用photshop或者美圖秀秀等工具對圖片進行的 美顏 / 濾鏡 / 黑白 / 摳圖 / 模糊等操作,這型別的重點主要在於演算法和效能層面。例如常用的妝容功能:
通過這些積累,我封裝了幾個專案中常用的功能:
- 圖片合成: Example Git
- 圖片裁剪: Example Git
- 人像摳除: Example Git
本系列首先從基礎型別處理開啟我們的旅程。基礎型別的圖片處理在實際專案中有著大量的使用場景,主要是運用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,可使匯出的圖片大小減小很多;
- quality: 圖片質量,可使用0~1之間的任意值;經過測試,該值設定成0.9時較為合適,可以有效減小圖片檔案大小且基本不影響圖片清晰度,匯出後的 base64 既為壓縮後的圖片;
Tips: 此處有個坑,想匯出jpg格式的圖片必須用image/jpeg,不能使用image/jpg;
// 將原圖等比例繪製到縮放後的畫布上;
ctx.drawImage(image,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,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); // 匯出圖片; ...
總結
本文主要介紹了一些前端圖片處理的前置知識:
圖片處理技術分類;
- 基礎型別圖片處理技術;
- 演算法型別圖片處理技術;
- 圖片的跨域;
- 圖片的載入;
還有講解了屬於基礎型別圖片處理中最簡單的兩類:
- 圖片的縮放;
- 圖片的裁剪;
- 圖片的旋轉;
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。