摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。

圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。由于過(guò)去一段時(shí)間公司的業(yè)務(wù)需求，讓我在這方面積累了一些干貨，趁著年后這段時(shí)間總結(jié)成一系列文章與大家分享，希望能對(duì)各位努力中的前端童鞋帶來(lái)啟發(fā)和幫助~~~?

本系列分成以下4個(gè)部分:

基礎(chǔ)類型圖片處理技術(shù)之縮放與裁剪；

基礎(chǔ)類型圖片處理技術(shù)之圖片合成；

基礎(chǔ)類型圖片處理技術(shù)之文字合成；

算法類型圖片處理技術(shù)；

文章中，我會(huì)提到很多在實(shí)際實(shí)踐中所遇到的坑或者經(jīng)驗(yàn)，應(yīng)該算是干貨滿滿~~如果能通讀，應(yīng)該能大大提升對(duì)前端圖片處理領(lǐng)域的理解，有感興趣的童鞋可以與我深入討論，希望本文能達(dá)到拋磚引玉的效果，讓前端在圖像處理方面有更多的可能性，有不足之處望請(qǐng)諒解。

通過(guò)這些積累，我封裝了幾個(gè)項(xiàng)目中常用的功能：

嘮叨完這些老套路后，我們開(kāi)始起飛！~~??????

首先，我這里將前端圖片處理暫且分成兩種類型：基礎(chǔ)類型 與 算法類型；

基礎(chǔ)類型的圖片處理技術(shù): 圖片縮放，旋轉(zhuǎn)，添加邊框，圖片合成，拼圖等業(yè)務(wù)都屬于基礎(chǔ)類型的圖片處理，其區(qū)分點(diǎn)在于無(wú)需使用像素級(jí)別的算法，而是通過(guò)計(jì)算改變圖片的尺寸及位置等來(lái)改造圖片。例如常用的貼紙功能:

算法類型的圖片處理: 這類型的圖片處理復(fù)雜度較高，特點(diǎn)是通過(guò)像素級(jí)別算法對(duì)圖片的像素點(diǎn)進(jìn)行RGBA通道值等進(jìn)行改造，例如我們使用photshop或者美圖秀秀等工具對(duì)圖片進(jìn)行的 美顏 / 濾鏡 / 黑白 / 摳圖 / 模糊等操作，這類型的重點(diǎn)主要在于算法和性能層面。例如常用的妝容功能:

本系列首先從基礎(chǔ)類型處理開(kāi)啟我們的旅程。基礎(chǔ)類型的圖片處理在實(shí)際項(xiàng)目中有著大量的使用場(chǎng)景，主要是運(yùn)用canvas的能力來(lái)完成，不存在性能和兼容性問(wèn)題，能夠達(dá)到線上運(yùn)行標(biāo)準(zhǔn)。我這里將基礎(chǔ)類型的圖片處理大致的分成以下幾種類型，這些類型基本能覆蓋日常所有業(yè)務(wù)場(chǎng)景：

圖片的縮放；

圖片的裁剪；

圖片的合成；

圖片與圖片的合成，例如貼紙，邊框，水印等；

為圖片添加文字；

為圖片添加基礎(chǔ)幾何圖形；

Tips: 我已將該類型的圖片處理場(chǎng)景封裝成了一個(gè)插件，基本上能應(yīng)付所有這類型圖片處理的需求，GIT地址 (歡迎探討);

在介紹具體的功能前，由于圖片的繪制完全的依賴于圖片的加載，因此先來(lái)了解一些前置知識(shí)。

首先，圖片加載并繪制涉及了圖片的跨域問(wèn)題，因此如果是一張?jiān)诰€的圖片，需要在圖片服務(wù)器上設(shè)置跨域頭，并且在前端加載圖片之前將標(biāo)簽的crossOrigin設(shè)置為*，否則繪制到畫布的時(shí)候會(huì)報(bào)跨域的錯(cuò)誤。

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

1、crossOrigin需要嚴(yán)格設(shè)置，既只有是線上圖片時(shí)，才設(shè)置，而本地路徑或者base64時(shí)，則一定不能設(shè)置，否則在某些系統(tǒng)下會(huì)報(bào)錯(cuò)，導(dǎo)致圖片加載失敗；

2、當(dāng)項(xiàng)目為本地包環(huán)境時(shí)，例如內(nèi)置于 App中時(shí)，crossOrigin值無(wú)效，webview的安全機(jī)制會(huì)導(dǎo)致無(wú)論該值設(shè)置與否，都會(huì)報(bào)跨域的錯(cuò)誤。解決辦法是：需要將所有圖片轉(zhuǎn)換成base64才能正確繪制；

3、crossOrigin值一定要在圖片加載之前設(shè)置，即為賦值src之前進(jìn)行設(shè)置，否則無(wú)效；

由于canvas的繪制需要的是已經(jīng)加載完成的圖片，我們需要確保繪制的素材圖片是已經(jīng)加載完成的，因此我們需要使用的onload事件，可以使用html中已存在的圖片，或者用js創(chuàng)建一個(gè)圖片對(duì)象:

function loadImage(image, loader, error){
    // 創(chuàng)建 image 對(duì)象加載圖片；
    let img = new Image();
    
    // 當(dāng)為線上圖片時(shí)，需要設(shè)置 crossOrigin 屬性；
    if(image.indexOf("http") == 0)img.crossOrigin = "*";
    img.onload = () => {
        loaded(img);
        
        // 使用完后清空該對(duì)象，釋放內(nèi)存；
        setTimeout(()=>{
            img = null;
        },1000);
    };
    img.onerror = () => {
        error("img load error");
    };
    img.src = image;
}

介紹圖片加載的前置知識(shí)后，我們先來(lái)看最簡(jiǎn)單的圖片處理---縮放與裁剪！

Tips: 相信大家閱讀本文時(shí)，如果對(duì)canvas不太了解，可以查詢下對(duì)應(yīng)的API文檔即可，本文不再對(duì)canvas基礎(chǔ)API做詳細(xì)講解。

圖片的縮放最常見(jiàn)的場(chǎng)景是做圖片的壓縮。在保證圖片清晰的前提下通過(guò)合理地縮小圖片尺寸，能大大的降低圖片的大小。在實(shí)際應(yīng)用場(chǎng)景中，有著廣泛的用途。例如圖片上傳時(shí)，用戶自主上傳的圖片可能是一張非常大的尺寸，例如現(xiàn)在手機(jī)所拍攝的照片尺寸經(jīng)常能達(dá)到1920*2560的尺寸,大小可能超過(guò)5M。而在項(xiàng)目中，我們可能并不需要用到這么大的尺寸，此時(shí)對(duì)圖片的壓縮能大大的優(yōu)化加載速度和節(jié)省帶寬；

該畫布既為圖片縮放后的尺寸，此處有個(gè)點(diǎn)是需要保證圖片的比例不變, 因此需要通過(guò)計(jì)算得出畫布的寬與高：

let imgRatio = img.naturalWidth / img.naturalHeight;

// 創(chuàng)建一個(gè)畫布容器；
let cvs = document.createElement("canvas");

// 獲取容器中的畫板；
let ctx = cvs.getContext("2d");
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;

這里使用2個(gè)最常用的方法:

ctx.drawImage(image, dx, dy, dw, dh): 這個(gè)方法其實(shí)最多可以接收9個(gè)參數(shù), 實(shí)現(xiàn)壓縮，只需要使用其中的5個(gè)參數(shù)即可, 其余參數(shù)在其它部分使用到時(shí)再做詳解；

image : 需要繪制的圖片源，需要接收已經(jīng) 加載完成 的HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement；

dx / dy : 相對(duì)于畫布左上角的繪制起始點(diǎn)坐標(biāo)；

dw / dh : 繪制的寬度和高度，寬高比例并不鎖定，可使圖片變形；

cvs.toDataURL(type, quality): 該方法用于將畫布上的內(nèi)容導(dǎo)出成 base64 格式的圖片，可配置2個(gè)參數(shù)；

type: 圖片格式, 一般可以使用 image/png 或者 image/jpeg, 當(dāng)圖片不包含透明時(shí)，建議使用jpeg，可使導(dǎo)出的圖片大小減小很多；

quality: 圖片質(zhì)量，可使用0~1之間的任意值；經(jīng)過(guò)測(cè)試，該值設(shè)置成0.9時(shí)較為合適，可以有效減小圖片文件大小且基本不影響圖片清晰度，導(dǎo)出后的 base64 既為壓縮后的圖片；

Tips: 此處有個(gè)坑, 想導(dǎo)出jpg格式的圖片必須用image/jpeg，不能使用image/jpg；

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

// 將繪制后的圖導(dǎo)出成 base64 的格式；
let b64 = cvs.toDataURL("image/jpeg", 0.9);

我們常用的圖片上傳功能，我們使用的是原生的標(biāo)簽，此時(shí)獲取到的是File格式的圖片，圖片的格式各異且尺寸很大，我們應(yīng)該壓縮處理后再使用。

使用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);
}

對(duì)base64的圖片使用剛才的canvas方式進(jìn)行壓縮的處理；

Tips: 這里有個(gè)小坑是，圖片的EXIF信息中的方向值會(huì)影響圖片的展示，在IOS會(huì)出現(xiàn)圖片的寬高與圖片的方向不匹配的問(wèn)題，因此需要進(jìn)行特殊處理，矯正圖片的方向。方案:

1、可以使用 exif.js 來(lái)獲取圖片信息中的Orientation屬性，利用canvas的旋轉(zhuǎn)繪制來(lái)矯正；

2、這里有個(gè) canvasResize.js 插件，可以解決從 File 到 base64 的所有問(wèn)題。

在實(shí)際項(xiàng)目中，由于圖片的寬高比例各式各樣，而展示和使用一般需要一個(gè)較為固定的比例，此時(shí)便需要將圖片裁剪成我們需要的寬高比例，使用到的方式其實(shí)和圖片的縮放基本一致，主要是通過(guò)調(diào)整 drawImage 的dx, dy參數(shù)來(lái)實(shí)現(xiàn)。原理其實(shí)是，將drawImage的繪制起始點(diǎn)(dx, dy)向上偏移，此時(shí)由于canvas已被我們?cè)O(shè)置成期望裁剪后的尺寸，而超出畫布的部分不會(huì)繪制，從而達(dá)到裁剪的目的；通過(guò)靈活的設(shè)置值，基本可以完成各種圖片裁剪需求，簡(jiǎn)單示例圖(黑色框代表創(chuàng)建的畫布的尺寸):

此處以需要將一張600*800的長(zhǎng)方形圖豎直居中裁剪為600*600的正方形圖為例, 簡(jiǎn)單封裝成一個(gè)功能函數(shù):

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

// 居中裁剪
function cropImage(img, ops){
    // 圖片原始尺寸；
    let imgOriginWidth = img.naturalWidth,
        imgOriginHeight = img.naturalHeight;
        
    // 圖片長(zhǎng)寬比，保證圖片不變形；
    let imgRatio = imgOriginWidth / imgOriginHeight;
    
    // 圖片裁剪后的寬高， 默認(rèn)值為原圖寬高；
    let imgCropedWidth = ops.width || imgOriginWidth,
        imgCropedHeight = ops.height || imgOriginHeight;
        
    // 計(jì)算得出起始坐標(biāo)點(diǎn)的偏移量, 由于是居中裁剪，因此等于 前后差值 / 2；
    let dx = (imgCropedWidth - imgOriginWidth) / 2,
        dy = (imgCropedHeight - imgOriginHeight) / 2;

    // 創(chuàng)建畫布，并將畫布設(shè)置為裁剪后的寬高；
    let cvs = document.createElement("canvas");
    let ctx = cvs.getContext("2d");
    cvs.width = imgCropedWidth;
    cvs.height = imgCropedHeight;
    
    // 繪制并導(dǎo)出圖片；
    ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio);
    return cvs.toDataURL("image/jpeg", 0.9);
}

圖片的旋轉(zhuǎn)的原理同樣也是將圖片繪制到畫布上進(jìn)行旋轉(zhuǎn)后再導(dǎo)出。其實(shí)使用到的是canvas的rotate方法；

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

// 將參照點(diǎn)移動(dòng)到畫板的中心點(diǎn)；
ctx.translate(ctx.width/2, ctx.height/2);
// 旋轉(zhuǎn)畫板；
ctx.rotate = 90;
// 繪制圖片；
ctx.drawImage(img);
// 導(dǎo)出得到旋轉(zhuǎn)后的圖片；
cvs.toDataURL();

這里有個(gè)比較特別的部分，就是這里旋轉(zhuǎn)的是畫布的畫板部分，并不是整個(gè)畫布容器，而畫布容器外面不會(huì)被繪制，因此這里就會(huì)出現(xiàn)一個(gè)圖像四個(gè)角被裁剪掉的問(wèn)題:

解決的方式就是:

將畫布容器放大，變成:

上面這個(gè)例子中，由于圖片是正方形，因此將容器的寬高放大1.5倍便可保證圖片不會(huì)被裁剪，而現(xiàn)實(shí)中的圖片由于寬高比例不定，因此這個(gè)放大系數(shù)是一個(gè)動(dòng)態(tài)的值:

Tips: 由于我們將畫板基點(diǎn)移動(dòng)到畫布中心了，因此在繪制的時(shí)候，要相對(duì)于基點(diǎn)調(diào)整 dx 與 dy;

// 創(chuàng)建畫布，獲取畫板；
...

// 放大系數(shù)為
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;
// 將參照點(diǎn)移動(dòng)到畫板的中心點(diǎn)；
ctx.translate(cvs.width/2, cvs.height/2);
// 旋轉(zhuǎn)畫板；
ctx.rotate = 90;

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

// 導(dǎo)出圖片；
...

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

圖片處理技術(shù)分類；

基礎(chǔ)類型圖片處理技術(shù)；

算法類型圖片處理技術(shù)；

圖片的跨域；

圖片的加載；

還有講解了屬于基礎(chǔ)類型圖片處理中最簡(jiǎn)單的兩類:

圖片的縮放；

圖片的裁剪；

圖片的旋轉(zhuǎn)；

相信大家已經(jīng)對(duì)圖片的處理有了個(gè)大致的了解了。下篇文章，我們將繼續(xù)深入研究基礎(chǔ)類型中的圖片合成，也是各種干貨滿滿，美不勝收~~???。

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