小程序技术方案

1. 小程序采用腾讯云音视频解决方案，实现多客服在线远程直播报案，支持远程抓拍留存；
2. 支持多文档展示和基于canvas进行在线手写签名授权；

小程序设计稿

这是一款名叫“为双十疯狂打CALL”的H5小游戏。产生背景：网易的互动H5小游戏刷爆朋友圈，刚好项目处于空档期。于是策划和设计找了一些游戏关卡，我这边进行技术实现。

项目技术：

整体项目采用canvas绘图展示+手指触摸检测+碰撞检测+输入控件，以及控制场景切换。

需要注意：canvas高倍像素屏幕图片展示和机型适配。

项目设计：

这个H5项目是给驭胜S330新车上市做的。项目开屏信封进入，点击进入，随手指滚动进行场景和内容展现。场景采用手绘动效的。还包含展示车型详情、活动规则、预约试驾以及中奖结果页面。

技术选型和方案

项目有4处采用了flash动画（开屏页、滚动页3处）。由于IOS和安卓的特性，手机对flash的支持各异。初步进行flv->MP4视频，然后使用PS将视频转成单张图片（使用gif或者制作精灵图，机型不同手机内存和性能展现结果不一）。

技术方案和问题解决如下：

1、加载和缓存动画图片；
2、采用canvas播放，播放缓存图片（750×1206），实现帧动画；
3、解决canvas播放动画手机端模糊问题，使用下面的解决方案：

var getPixelRatio = function(context) {
  var backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
   return (window.devicePixelRatio || 1) / backingStore;
};

//调用
var ratio = getPixelRatio(ctx);

4、使用iscroll-prob.js实现基于位置滚动加载；
5、使用swiper实现详情页的动态展示。解决swiper安卓机型滑动问题，修改参数如下：

observer: true,//修改swiper自己或子元素时，自动初始化swiper  
observeParents: true,//修改swiper的父元素时，自动初始化swiper  

待优化

项目已进行了优化，基本满足客户上线需求。

1.由于存在大量图片加载，会出现页面99%的时间较长。如果加载更平滑一些，loading页面看起来会自然一些。
2.后续建议：针对简单的帧动画能用代码实现，尽量用代码实现，减少使用图片。

设计与发布地址

1. canvas位图处理

HTML5 canvas为我们提供了一块画布，让前端也有了操作位图的功能：图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。

图像基本处理

通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意: canvas无法绘制体积过大图片，否则会卡甚至崩掉，大图可以分块读取绘制)：

详细用法参考 drawImage()，DEMO源码戳这里 JS Bin.

只需要drawImage一个方法，就可以实现基本图形处理功能，再结合鼠标或滚轮事件，就可以实现更复杂的局部放大预览，缩放等功能了。

图像滤镜处理

现在的朋友圈发个图都要用滤镜美一下，复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息，这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息，然后用setImageData方法把新的数据重新绘制在canvas上，这样就可以实现图像滤镜打码加特效等一系列功能。

比如我们现在要实现一个复古滤镜:

// 复古滤镜处理算法：获取每个像素的RGB信息，并按特定权重返回其加权平均值
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}
//图像地址必须和当前页面同域，否则会报cross-origin错误 
img.src = '/img/logo@2x.png' 
img.onload = () => {
  ctx.drawImage(img, 0, 0) // 绘制原图
  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息
  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片
}

详细用法参考 getImageData() 和 putImageData()，DEMO源码戳这里 JSFiddle

滤镜处理关键在于滤镜算法，要想写出更高级的特效需要有计算机图形学基础，对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解，这个坑很大我就不挖了。

图像base64存储
加完特效后如果我们想把图像保存下来，就可以用toDataURL方法来对图片进行格式转换、压缩存储了。

// 支持三种文件类型：image/png(默认) | image/jpeg | image/webp(仅Chrome)
canvas.toDataURL() // 默认存储为png
// 仅jpeg/webp支持质量参数(0~1,默认0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存储为质量为0.1的jpeg

由于存储形式是base64编码，原来图片的每三个字节都会被扩展成4字节，所以整体上编码后数据会比原来多约1/3。以下是通过toDataURL存储后的图片和原图大小相关对比数据(数据仅供参考，不具通用性)：

可见存储后图片体积并不是原来的4/3，实际上处理后的图片都会比原图大好几倍，并且不同的图片增大的体积也是不确定的。如果是要上传图片到服务器，可以把base64转化成Blob二进制数据压缩上传；如果要直接在前端显示或供用户下载，jpg还好可以设置质量参数，要是png就没法压缩了。

只是用toDataURL还不够，用户需要通过手动点击图片-右键图片存储为来保存图片，如果要实现点击下载按钮自动下载图片还需要修改图片类型为octet-stream，然后利用HTML5的download属性强制让浏览器下载。

详细用法参考toDataURL(). 自动下载图片DEMO源码快戳我 JSFiddle.

程序员的备胎

有了以上基础，再结合成熟的图形处理算法，我们可以完成日常工作中大部分图像处理需求，以下列出了一些相关轮子可做备胎。备胎这种东西多多益善，万一以后用到了呢？

html2canvas

将web页面通过canvas来实现截屏，其原理就是遍历DOM结构和样式，然后在canvas中绘制出来，通过toDataURL输出图片。但由于canvas图片的同源策略限制，如果图片和网站不同源的话会截取不出来的。另外在微信中测试时，即使用同源的图片截取出来的图片也有问题，所以要想将其用于生产环境，还是得看场景，有很多坑要踩。

code-to-image

代码转图片工具。有时候你在不同的平台写文章贴代码，由于不同平台代码格式化规范不一，所以经常会出现代码排版问题，通过这个工具将代码转成图片就可以避免排版问题了。

Cropper

一个专门用来做图片裁剪的应用。

tracking.js

这是一个专业的计算机视觉处理JS库，包含了大量图形处理算法，可用来做人脸识别，色彩追踪等酷炫功能。

qrcode2

用JS动态生成二维码，这个库还是很实用的，原理就是qrcode算法+canvas绘图，不支持canvas的用table兼容。

AlloyImage
腾讯出的基于HTML5的专业级图像处理开源引擎，功能很强大，简直就是Web版的PS。

以上列举部分，更多备胎在此： https://github.com/0326/canvas

2. SVG矢量图处理

讲完位图再说矢量图。矢量图在绘制图标、商业LOGO、动画元素上应用非常广范。Web最开始支持的矢量图形并不是现在的SVG，而是微软主推的VML，所以在低版本IE下面只支持VML而不支持SVG，直到后来SVG成为W3C标准并被普及，微软才在IE9中支持SVG。

SVG遵循XML规范，可以很好的集成在HTML里面，同时支持JS脚本控制，还有基于SMIL标准的动态内容支持，做起动画来也是非常方便。目前基于SVG的JS图形库轮子也是非常多，如svg.js, Snap.svg, Velocity.js, D3.js等等，目前暂无SVG应用需求，等用的时候再翻牌子吧。

3. CSS图像处理

如果你的图像特效只是用来给用户展示，并不需要存储的话，可以直接用CSS处理，基本的调整图片大小、拉伸、旋转、裁切等操作直接几个CSS属性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效，使用CSS滤镜Duang的一下就出来了，不需要任何图形学基础和数学知识：

详细说明见 CSS filter – MDN, DEMO 源码见JS Bin.

4. 总结

最后介绍个小工具TrimPNG。大家都知道TinyPNG可以压缩PNG, TrimPNG顾名思义就是去除图片空白和白边的，实现了自动抠图和切图的功能（logo我是直接抄的TinyPNG，都是熊猫，应该不要紧?）

用到的技术点上面都说到了，裁切实现原理就是横向纵向分别扫描两次像素点阵，找出上下左右最外面的非透明点，然后定位出有效图像区域。去除白边算法目前还比较傻逼，只要是接近白色的点都被我干掉了，后面再完善好了 去白边算法优化了一下，采用标记清除策略（听着耳熟吧，其实就是从GC受的启发…），先扫描一遍标记出可疑白点，然后再扫描一遍，凡是与透明区域相邻的可疑白点就清除，当然这个算法也比较死，如果有更专业更智能的请务必告诉我。

体验地址：http://quanfeng.tech/trimpng/

本文仅作技术分享和学习。原文地址：https://segmentfault.com/a/1190000008044204。

最近被人民日报换军装的H5刷爆朋友圈，于是有汽车厂商想做类似的项目。用于旅游照片换脸分享朋友圈，植入汽车公众号进行宣传。

可是之前没有类似的项目经验，于是搜集相关代码和当前人脸识别市场进行调研。主要有以下几大阵营：

1. Face++https://www.faceplusplus.com.cn/
2. 腾讯优图和天天P图。天天P图和腾讯优图是不同部门负责http://open.youtu.qq.com/welcome/experience
3. 百度AI开发平台http://ai.baidu.com/tech/face
4. 其他阵营，如美图秀秀等

人民日报换军装的H5，就是由天天P图公司制作的。

对比API和技术支持

Face++、腾迅优图API以及百度AI平台图像处理方面产品线都比较全，都在进行产品线更新。

1. 首先联系的Face++, Face++不支持换军装定制开发。
2. 然后联系腾讯优图，说会转个天天P图的同事，然后一直没有回音。
3. 最后在腾讯优图找到了换军装的Demo，里面找到了作者联系方式，报价10+万。
4. 没有联系百度公司。

估计成本太高，客户后面就没有了反馈。
等待总是漫长的，作为技术总是爱折腾和尝试。以下是进行的折腾之旅：

思路一 Face++背景融合：

用户上传个人全身照，选择场景进行图片叠加处理。

1. 注册开发者获取api_key和api_secret

进行接口权限认证和数据请求需要用到。

2. 上传原始图片

3. 获取灰度图

发送原始图片，获取返回的灰度图。

var params = $('form').serializeArray();
$.ajax({
    url: 'https://api-cn.faceplusplus.com/humanbodypp/beta/segment',
    type: 'POST',
    data: params,
    dataType: 'json',
    success: function(data){
        console.log(data);
        var grayImg =  'data:image/jpeg;base64,'+data.result;
        $('#resultImg').attr('src', grayImg);
        $('#addedImg').attr('src', clipImgWithGrayImg( grayImg));
    },
    error: function (msg) {
        console.log(msg);
    }
});

调用接口返回二进制数据流，增加data:image/jpeg;base64,前缀，即可使用img读取图片。

4. 裁剪原始图片与背景图片融合

根据获取的灰度图，使用canvas对原图进行像素级操作，裁剪原图。针对非人像部分，进行像素透明操作。可以进行对边界部分进行参数调节操作，如下：

<!-- 已知灰度图裁切原始图片 -->
function clipImgWithGrayImg(grayImg) {
    var canvas = document.getElementById("myCanvas");
    var image = document.getElementById("resultImg");
    image.crossOrigin="Anonymous";

    <!-- 将得到的图像绘制在Canvas对象中的代码如下：-->
        canvas.width=image.width;
    canvas.height=image.height;
    var ctx=canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
    <!-- 从Canvas对象中获取图像像素数据的代码如下：-->

        var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    <!-- 读取像素值与实现灰度计算的代码如下：-->

        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];

                if (r < 128 || g < 128 || b < 128) {
                    canvasData.data[idx + 3] = 0; // Alpha channel
                }
            }
        }

    var data = canvasData.data;
    ctx.clearRect(0,0, canvas.width, canvas.height);
    var srcImage = document.getElementById("srcImg");
    ctx.drawImage(srcImage, 0, 0);
    srcImage.crossOrigin="Anonymous";

    <!-- 从Canvas对象中获取图像像素数据的代码如下：-->
        var canvasData2 = ctx.getImageData(0, 0, canvas.width, canvas.height);

    for ( var j = 0; j < canvasData2.width; j++) {
        for ( var k = 0; k < canvasData2.height; k++) {
            // Index of the pixel in the array
            var idx = (j + k * canvasData2.width) * 4;
            canvasData2.data[idx + 3] = data[idx + 3];
        }
    }

    ctx.putImageData(canvasData2,0,0);
    return canvas.toDataURL();
}

与背景图合成结果：

总结：边界判断还需要优化，不能够满足商用的完美融合需求。

思路二 人脸检测与人脸替换：

使用换脸的正常流程： 人脸检测–>人脸特征提取–>模型脸型匹配–>替换人脸–>肤色更换

1. 获取人脸检测数据

上传图片，调用人脸检测的接口，获取人脸特征数。

var params = $('form').serializeArray();
$.ajax({
    url: 'https://api-cn.faceplusplus.com/facepp/v3/detect', // 人脸检测API
    type: 'POST',
    data: params,
    dataType: 'json',
    crossDomain: true,
    success: function(data){
        console.log(data);
        if (data.faces.length > 0) {
            drawFace(data.faces[0].face_rectangle, data.faces[0].landmark);
        }
    },
    error: function (msg) {
        console.log(msg);
    }
});

2. 识别人脸

调用Face++人脸识别接口，返回的特征可以正常匹配，但是人脸的位置异常。

代码如下：

<!-- 显示面部区域draw face -->
function drawFace(rect, landmark) {
    var canvas = document.getElementById("myCanvas");
    var image = document.getElementById("srcImg");
    image.crossOrigin="Anonymous";
    var points = [
        {'x': landmark.contour_left1.x, 'y':landmark.contour_left1.y},
        {'x': landmark.contour_left2.x, 'y':landmark.contour_left2.y},
        {'x': landmark.contour_left3.x, 'y':landmark.contour_left3.y},
        {'x': landmark.contour_left4.x, 'y':landmark.contour_left4.y},
        {'x': landmark.contour_left5.x, 'y':landmark.contour_left5.y},
        {'x': landmark.contour_left6.x, 'y':landmark.contour_left6.y},
        {'x': landmark.contour_left7.x, 'y':landmark.contour_left7.y},
        {'x': landmark.contour_left8.x, 'y':landmark.contour_left8.y},
        {'x': landmark.contour_left9.x, 'y':landmark.contour_left9.y},
        {'x': landmark.contour_chin.x, 'y':landmark.contour_chin.y},
        {'x': landmark.contour_right9.x, 'y':landmark.contour_right9.y},
        {'x': landmark.contour_right8.x, 'y':landmark.contour_right8.y},
        {'x': landmark.contour_right7.x, 'y':landmark.contour_right7.y},
        {'x': landmark.contour_right6.x, 'y':landmark.contour_right6.y},
        {'x': landmark.contour_right5.x, 'y':landmark.contour_right5.y},
        {'x': landmark.contour_right4.x, 'y':landmark.contour_right4.y},
        {'x': landmark.contour_right3.x, 'y':landmark.contour_right3.y},
        {'x': landmark.contour_right2.x, 'y':landmark.contour_right2.y},
        {'x': landmark.contour_right1.x, 'y':landmark.contour_right1.y},
        {'x': landmark.right_eyebrow_right_corner.x, 'y':landmark.right_eyebrow_right_corner.y},
        {'x': landmark.right_eyebrow_upper_middle.x, 'y':landmark.right_eyebrow_upper_middle.y},
        {'x': landmark.left_eyebrow_upper_middle.x, 'y':landmark.left_eyebrow_upper_middle.y},
        {'x': landmark.left_eyebrow_left_corner.x, 'y':landmark.left_eyebrow_left_corner.y}
    ];

    <!-- 将得到的图像绘制在Canvas对象中的代码如下：-->
        canvas.width=image.width;
    canvas.height=image.height;
    var ctx=canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
    ctx.beginPath();
    ctx.rect(rect.top, rect.left, rect.width, rect.height);
    $.each(points, function (index, item) {
        if (index === 0) {
            ctx.moveTo(item.x, item.y);
        } else {
            ctx.lineTo(item.x, item.y);
        }
    });
    ctx.closePath();
    ctx.strokeStyle = "green";
    ctx.stroke();
}

3. 人脸替换

待完成

4. 制作滤镜，更换肤色

待完成

总结

换脸H5中，还是有过程需要完成。当前主要涉及Face++的接口调用和Canvas图片处理能力。商用过程，还有很多情况需要考虑，比如人脸位置检测与校验、滤镜换肤。听说腾讯优图1个月左右会开放换脸API，敬请期待。