摘要：下面就講解一下，移動(dòng)端上傳照片，旋轉(zhuǎn)，摳圖以及圖片美白效果原理。

下面就講解一下，移動(dòng)端上傳照片，旋轉(zhuǎn)，摳圖,以及圖片美白效果原理。

下面是兩種上傳照片的方法

1、此方法被廢棄，希望能給大家一點(diǎn)提示，和思考的空間

a、通過改變file的值獲取圖片路徑，并把路徑添加到img元素中，在頁面中展示

b、圖片上傳，可以用form表單上傳，但是獲取不到返回值，可以用ajaxfileupload.js上傳

2、通過canvas畫布上傳照片，此方法被推薦

 a、照片展示，通過file獲取圖片路徑，畫到canvas上，在用base64轉(zhuǎn)化一下

 b、上傳圖片，通過ajax post上傳

總結(jié)：之所以先第二種方案，因?yàn)榈谝环N方法，直接上傳最原始圖片，圖片尺寸大小都會(huì)影響服務(wù)器的速度，而且圖片太大會(huì)導(dǎo)致上傳失敗，而用canvas先縮放圖片尺寸大小，可以很好的完成上傳

在上傳過程中，如果不對(duì)圖片進(jìn)行處理，會(huì)因?yàn)榕臄z角度，圖片展示效果不會(huì)達(dá)到預(yù)期效果,而且不會(huì)進(jìn)行五官識(shí)別
此方法主要借助exif.js獲取照片拍攝角度進(jìn)行旋轉(zhuǎn)

checkImgAngel=function(n,m,h){
    EXIF.getData(n, function () {
        EXIF.getAllTags(n);
        var  imgOrient= EXIF.getTag(n, "Orientation");
        switch(imgOrient){
            case 6://需要順時(shí)針（向左）90度旋轉(zhuǎn)
                rotateImg(n,"left");
                break;
            case 8://需要逆時(shí)針（向右）90度旋轉(zhuǎn)
                rotateImg(n,"right");
                break;
            case 3://需要180度旋轉(zhuǎn)
                rotateImg(n,"right");//轉(zhuǎn)兩次
                rotateImg(n,"right");
                break;
        }
    })
}
function rotateImg(img, direction) {
    var canvas = document.createElement("canvas")
    var ctx = canvas.getContext("2d")
    $(document.body).append(canvas)

    var min_step = 0;
    var max_step = 3;
    if (img == null)return;
    var height = img.height;
    var width = img.width;
    var step = 2;
    if (step == null) {
        step = min_step;
    }
    if (direction == "right") {
        step++;
        step > max_step && (step = min_step);
    } else {
        step--;
        step < min_step && (step = max_step);
    }

    //旋轉(zhuǎn)角度以弧度值為參數(shù)
    var degree = step * 90 * Math.PI / 180;
    var ctx = canvas.getContext("2d");
    switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height);

            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0);

            break;
    }
}

此效果需要借助騰訊優(yōu)圖API完成，騰訊優(yōu)圖會(huì)提供人臉五官坐標(biāo)，通過canvas的clip()方法，對(duì)人臉進(jìn)行摳圖

function drawLine(data,status){
    var data = setData1(data,status)//接口返回?cái)?shù)據(jù)并處理
    ctx.save();
    var len=data.length
    ctx.beginPath();
    ctx.moveTo(data[0].x,data[0].y)
    for(var i=1;i
注意：因?yàn)榉祷氐淖鴺?biāo)并不全是五官的輪廓坐標(biāo)，所以需要開發(fā)人員先對(duì)數(shù)據(jù)進(jìn)行處理，剔除不需要的坐標(biāo)
四、人臉美白
主要原理是canvas的getImageData方法，獲取到每一個(gè)像素點(diǎn)的rgba值，進(jìn)行運(yùn)算，在通過putImageData方法，重新渲染圖片，先通過isPointInPath方法，把需要美白的部分點(diǎn)push到一個(gè)數(shù)組中

對(duì)臉部點(diǎn)進(jìn)行處理，push到imgDataArr數(shù)組中
var imgDataArr=[]
function drawLine(data,status){
    var data = setData1(data,status)//接口返回?cái)?shù)據(jù)并處理
    var len=data.length
    ctx.beginPath();
    ctx.moveTo(data[0].x,data[0].y)
    for(var i=1;i
通過接口返回的臉部五官數(shù)據(jù)獲取像素點(diǎn)，通過drawLine()在canvas上畫出臉部模型，在通過isPointInPath方法，收集臉部數(shù)據(jù)
美白效果
function setImagedata(){
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
    for(var i= 0 ;i