弁言：

本系列如今构想成以下4个部份:

• 基本范例图片处置惩罚手艺之缩放、裁剪与扭转(传送门)；
• 基本范例图片处置惩罚手艺之图片合成(传送门)；
• 基本范例图片处置惩罚手艺之笔墨合成(传送门)；
• 算法范例图片处置惩罚手艺(传送门)；

经由过程这些积聚，我封装了几个项目中经常运用的功用：

图片合成     图片裁剪     人像抠除

之前文章主要引见了裁剪/扭转/合成等基本范例的图片处置惩罚(笔墨的合成编写中…???)，我们最先来引见算法范例的图片处置惩罚手艺！~~✈️✈️✈️

这范例的重点主要在于 算法 和 机能 层面，在前端因为js及装备机能的限定，一般表现并不抱负。在真正的线上营业中，为了寻求更好的用户体验，只能运转一些相对比较轻量级的，机能好的算法。由效劳端来举行举行，会是更好的挑选。

Tips: 因为我对算法方面并没有很深的明白，因而本文重如果一些算法外层及基本道理的解说，不触及算法自身。愿望人人体谅哈~?

我们以下面两个?来做开端的相识：

(一) 万圣节小运用

万圣节效果

效果图以下：

这个小运用是一个万圣节运动。人物面部的木偶妆容确切很炫酷，然则这里须要庞杂的人脸辨认，模子比对以及妆容算法，放在前端机能堪忧，因而让效劳端来处置惩罚，显然是更好的挑选。而边框和背景图的隐约处置惩罚，这范例的处置惩罚就比较适宜放在前端了，起首机能能接收，而且更具灵活性，能在差别进口随时替代差别的边框素材。

关于效劳端的妆容算法，因为我对算法并没有深切研讨，在这里就不班门弄斧了，我们就直接来梳理下前端的部份:

• 发送原图给效劳端，接收 妆容处置惩罚 后的效果图;
• 下载效果图后，缩放成适宜大小后举行 隐约化处置惩罚 ，获得隐约后的效果图;
• 将效果图 / 隐约图 / 边框举行 像素级的融会 ;

Tips: 这里运用的满是像素级别的算法融会，经由过程基本范例的合成，一样能够完成。

算法机能提拔

图片算法处置惩罚本质道理实际上是 遍历像素点，对像素点的RGBA值举行革新。关于革新算法自身，本文就不深切了，不过能够与人人分享下相干的履历。

尽人皆知，一个好的算法，一个最主要的目标就是机能，而怎样提拔机能呢？一种是 算法优化 ，进步轮回内部的机能或许优化遍历算法，算法中的机能会因为遍历的存在被放大无数倍。另一种则是 削减像素点。

像素点的遍历是一个算法的主要机能斲丧点，轮回次数直接决议着算法的机能。而像素点的数目与图片的大小尺寸成正向指数级增进，因而 恰当的缩放图片源后再去处置惩罚，对机能的提拔异常庞大。比方一张2000*2000的图片,像素点足足有400万个，意味着须要遍历400万次，而把图片减少成 800*800 时，轮回次数为64万，这里我做过一个测试：

let st = new Date().getTime();
let imgData = [];
for (let i = 0; i < n * 10000; i += 4) {
    let r = getRandom(0,255),
        g = getRandom(0,255),
        b = getRandom(0,255),
        a = 1;
    if (r <= 30 && g <= 30 && b<= 30) a = 0;
    imgData[i] = r;
    imgData[i + 1] = g;
    imgData[i + 2] = b;
    imgData[i + 3] = a;
}
let et = new Date().getTime();
let t = et - st;
console.log(`${n}万次耗时:${et - st}ms`, imgData);

测试效果为(mac-chrome-20次取均匀):

能够看出图片的减少，对机能有异常明显的提拔。这里有个特性，机能收益会跟着缩放系数的变大而越来越低，当缩放系数为0.8时，机能已大大提拔了42%，而继承缩放为0.6时，收益便最先大幅下落，只提拔了20%。同时缩放图片意味着质量的下落，所以这里须要寻觅一个 平衡点 ，在不影响效果图效果的前提下，尽量地提拔机能，这须要依据算法对图片质量的请求来定。

别的，对 原图的裁剪也是个很好的要领，裁剪掉过剩的背景部份，也能到达削减遍历次数，提拔机能的效果。

隐约算法

小运用中隐约部份运用的是 StackBlur.js 的隐约算法，运用代码以下:

// 缩放妆容图;
let srcImg = scaleMid(imgData);

// 建立隐约效果图的容器；
let blurCvs = document.createElement('canvas'),
    blurCtx = blurCvs.getContext('2d');

// 先复制一份原图数据,；
let blurImg = blurCtx.createImageData(srcImg.width, srcImg.height);
let size = srcImg.width * srcImg.height * 4;
for (let i = 0; i < size; i++) {
    blurImg.data[i] = srcImg.data[i];
}

// 缩放成400*400的大小;
blurImg = scale(blurImg, 400);

// 举行隐约处置惩罚；
StackBlur.imageDataRGBA(blurImg, 0, 0, blurImg.width, blurImg.height, 1);

// 处置惩罚完后再放大为800*800;
blurImg = scale(blurImg, 800);

图象融会

我们已准备好合成终究效果图的一切素材了，隐约背景 / 妆容图 / 边框素材，末了一步就是将三者举行融会，融会的道理是 依据终究效果图分地区，在差别地区离别填入对应的素材数据:

// 图片融会
function mix(src, blur, mtl) {
      // 终究效果图为牢固800*800；纵向800的数据；
    for (let i = 0; i < 800; i++) {
        let offset1 = 800 * i;
        
        // 横向800的数据；
        for (let j = 0; j < 800; j++) {
            let offset = (offset1 + j) * 4;
            
            // 在特定的位置填入素材；
            if (i <= 75 || i >= 609 || j <= 126 || j >= 676) {
                let alpha = mtl.data[offset + 3] / 255.0;
                mtl.data[offset] = alpha * mtl.data[offset] + (1 - alpha) * blur.data[offset];
                mtl.data[offset + 1] = alpha * mtl.data[offset + 1] + (1 - alpha) * blur.data[offset + 1];
                mtl.data[offset + 2] = alpha * mtl.data[offset + 2] + (1 - alpha) * blur.data[offset + 2];
                mtl.data[offset + 3] = 255;
            } else {
                let alpha = mtl.data[offset + 3] / 255.0;
                let x = i - 75;
                let y = j - 126;
                let newOffset = (x * 550 + y) * 4;
                mtl.data[offset] = alpha * mtl.data[offset] + (1 - alpha) * src.data[newOffset];
                mtl.data[offset + 1] = alpha * mtl.data[offset + 1] + (1 - alpha) * src.data[newOffset + 1];
                mtl.data[offset + 2] = alpha * mtl.data[offset + 2] + (1 - alpha) * src.data[newOffset + 2];
                mtl.data[offset + 3] = 255;
            }
        }
    }
    return mtl;
}

(二) 抠除人像

这是一个基于效劳端的人像mask层，在前端把人像抠出的效劳，如许便能够进一步做背景的融会和切换，如今已用在多个线上项目中了。

人像抠除)

这里须要基于由效劳端处置惩罚后的两张效果图:

带背景的效果图和mask图:

1、我们须要先将mask图举行处置惩罚:

// 绘制mask；
// mask_zoom: 既为了优化机能所做的缩放系数;
mask = document.createElement('canvas');
maskCtx = mask.getContext('2d');
mask.width = imgEl.naturalWidth * ops.mask_zoom;
mask.height = imgEl.naturalHeight * ops.mask_zoom / 2;
maskCtx.drawImage(imgEl, 0, - imgEl.naturalHeight * ops.mask_zoom / 2, imgEl.naturalWidth * ops.mask_zoom , imgEl.naturalHeight * ops.mask_zoom);

2、去除mask的黑色背景，变成通明色,这里须要用到像素操纵:

// 猎取图片数据；
let maskData = maskCtx.getImageData(0, 0, mask.width, mask.height);

// 遍历革新像素点，将靠近黑色的点的通明度改成0;
for (let i = 0; i < data.length; i += 4) {
    let r = data[i],
        g = data[i + 1],
        b = data[i + 2];
        
    if (r <= 30 && g <= 30 && b<= 30)data[i + 3] = 0;
}

// 将革新后的数据从新填回mask层中;
maskCtx.putImageData(maskData, 0, 0);

3、图象融会，这里用到了一个奇异的canvas要领，置信人人听过，但并不熟习 — globalCompositeOperation,该值能够修正canvas的融会形式，有多种融会形式人人能够自行研讨，这里运用的是source-in;

// 建立终究效果图容器；
result = document.createElement('canvas');
resultCtx = result.getContext('2d');
result.width = imgEl.naturalWidth;
result.height = imgEl.naturalHeight;

// 先绘制mask图层做为背景;
resultCtx.drawImage(mask, 0, 0, imgEl.naturalWidth, imgEl.naturalHeight);

// 修正融会形式
resultCtx.globalCompositeOperation = 'source-in';

// 绘制带背景的效果图
resultCtx.drawImage(origin, 0, 0);

终究获得的效果图:

末了就能够运用这类人像图与任何背景或许素材依据营业需求再做融会了。

结语

算法部份因为本人才疏学浅，没要领深切论述，只能分享一些比较深刻的履历，希冀能在未交游更底层的范畴生长。

不过照样希冀能对人人有所启示。~~有图片处置惩罚兴致的童鞋，能够随时与我讨论哈，希冀获得大神的指点，也愿望js能在图片处置惩罚范畴有更快的生长。

谢谢人人的浏览。~~~????。