实现移动端头像截取并上传

秉承一贯原则，先上效果图

截取前：

图片的宽度是固定的 width:100%;padding:20px;
显示的时候会自动根据原始图片的长宽设定

截取中：

截取后：

其实这里还有一点小bug 应该根据截取后的图片长宽比重新设定画板的高度和宽度

贴上主要代码：

user.head.cutimg

var CutImg = function() {
    this.startX;
    this.startY;
    this.ctx;
    this.canvas;
    this.marginTop;
    this.paddWidth = 20;  //TODO padding的高度  需要设定
    this.bufferImg;
    this.endX;
    this.endY;
    this.width;
    this.height;
}
CutImg.prototype.init = function(id, src) {  //初始化图片
    var cutImg = this;
    var clientWidth = document.body.clientWidth; //客户端的宽度
    cutImg.width = clientWidth - cutImg.paddWidth;
    var clientHeight = document.body.clientHeight; //客户端的高度
    var downX = 0; //点击时的第一个点
    var downY = 0;
    var canMove = false;
    var container = document.getElementById(id);
    cutImg.canvas = container;
    var marginTop; //距离上部的高度
    var padding = this.paddWidth;
    var containerBuffer = document.createElement("canvas"); //缓存图像
    container.width = clientWidth-cutImg.paddWidth;
    var ctx = container.getContext("2d");
    var ctxBuffer = containerBuffer.getContext("2d");
    ctx.lineWidth = 1;
    var img = new Image();
    img.src = src;
    img.onload = function() {
        //根据图片比例设定画板的高度
        var _imgRealWidth = img.width;
        var _imgRealHeight = img.height;
        var containerHeight = _imgRealHeight * (container.width / _imgRealWidth);
        container.height = containerHeight; //算出画板的高度
        cutImg.height = containerHeight;
        //根据画板的高度  得知画板距离上面的高度
        marginTop = 44 + (clientHeight - 44 - containerHeight) / 2; //TODO  注意 这个44是我头部的高度，如果没有头部 去掉他
        cutImg.marginTop = marginTop;
        containerBuffer.width = container.width;
        containerBuffer.height = container.height;
        ctxBuffer.drawImage(img, 0, 0, container.width, containerHeight); //生成缓存图像
        cutImg.bufferImg = containerBuffer;
        ctx.drawImage(containerBuffer, 0, 0, container.width, containerHeight);
        cutImg.ctx = ctx;
    };
    container.addEventListener('touchstart', function(e) {
        e.preventDefault();
        var touch = e.targetTouches[0];
        downX = touch.pageX;
        downY = touch.pageY;
        cutImg.startX = downX;
        cutImg.startY = downY;
        canMove = true;
    });
    container.addEventListener('touchmove', function(e) {
        if (canMove) {
            e.preventDefault();
            var touch = e.targetTouches[0];
            if (touch.pageX < downX || touch.pageY < downY)
                return;
            ctx.fillStyle = "rgba(0,0,0,.5)";
            ctx.strokeStyle = "rgba(0,0,0,.5)";
            ctx.clearRect(0, 0, this.width, this.height); //清楚绘画区域
            ctx.drawImage(containerBuffer, 0, 0, this.width, this.height); //画上原始图画
            var distaX = Math.abs(touch.pageX - downX);
            var distaY = Math.abs(touch.pageY - downY);
            var originX = downX + distaX / 2;
            var originY = downY + distaY / 2 - marginTop;
            var radius = distaX / 2;
            ctx.beginPath();
            //矩形的绘制方法
            ctx.strokeRect(downX, downY - marginTop, touch.pageX-downX, touch.pageY-downY);
            ctx.fillRect(0, 0, container.width, downY - marginTop);
            ctx.fillRect(0, downY - marginTop, downX, touch.pageY - downY);
            ctx.fillRect(touch.pageX, downY - marginTop, container.width - touch.pageX, touch.pageY - downY);
            ctx.fillRect(0, touch.pageY - marginTop, container.width, container.height + marginTop - touch.pageY);
            //绘制圆
            //          ctx.arc(originX,originY,radius,0,360,false);
            ctx.stroke();
            ctx.closePath();
            cutImg.endX = touch.pageX;
            cutImg.endY = touch.pageY;
        }
    },false);
    container.addEventListener('touchend', function(e) {
        canMove = false;
    });
}
CutImg.prototype.previewImg = function() { //预览图片
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.drawImage(this.bufferImg, 
        this.startX, this.startY-this.marginTop, this.endX-this.startX, this.endY-this.startY, 
        0, 0, this.width,this.height);
}
CutImg.prototype.rebackImg = function(){  //返回图片数据
    return this.canvas.toDataURL();
}

---

通过上面的代码可以看出：
CutImg.init(“画板ID”,”图片路径”);
CutImg.previewImg(); //预览截取后的图片
cutImg.rebackImg(); //得到图片的字符集
注意上传的时候最好用
cutImg.rebackImg().substring(22);去掉图片前面的图片声明

需要改动的地方我都用了 TODO做标识。
还有就是画板本身是没有垂直居中效果的，我是用了样式来控制

<div class="hami-vertical-center-container" style="height: calc(100% - 44px);background: #000;">
            <canvas id="head_container" style="padding: 20px;">
            </canvas>
        </div>

如何设定hami-vertical-center-container这个class样式达到其子块的垂直居中效果

    width:100%;
    height:100%;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;