关于利用input file 移动端上传的问题处理

近期处理了一个html5在移动端上传问题，通过input file组件可以实现点击调用移动端系统拍照和上传功能，基于React写法如下 

<input onChange={this.props.uploadFile} type="file" accept="image/*" {...capture}/>

解释：capture 的取值如果为 camera 则直接调用摄像头拍照，拍照或者选择相册完成后触发 uploadFile 方法读取图像数据做进一步操作。uploadFile 方法如下： 

// 获取本地图像
uploadFile(e, type) {
    e.stopPropagation();
    let _this = this;
    let file = e.target.files[0];
    
    // 过滤非图片格式
    if (file && !/image\/\w+/.test(file.type)) {
        pageConfig.alert("文件必须为图片！");
        return false;
    }
    
    let reader = new FileReader();
    let filesize = Math.round(file.size / 1024);
    let mId = this.props.imgState.target;
    reader.onload = function () {
        let url = reader.result; // 压缩图片            
        _compass(url, filesize);
    }
    reader.readAsDataURL(file);  // 将文件转为base64

    function _compass(res, filesize) {
            let max = 100;
            if (filesize > max) {
                // 如果图片大于100K，则需要压缩；
                let img = new Image();
                let maxW = window.screen.availWidth * window.devicePixelRatio / 2 // 设备宽度
                img.onload = () => {
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');
                    if (img.width > maxW) {
                        img.height *= maxW / img.width;  // 同比例缩小
                        img.width = maxW;
                    }

                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.clearRect(0, 0, ctx.width, ctx.height);
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let dataUrl = canvas.toDataURL('image/jpeg', .95); //压缩质量

                    // 开始上传照片
                    that.startUploadPhoto(type, mId, dataUrl);
                }
                img.src = res;
            } else {
                // 开始上传
                that.startUploadPhoto(type, mId, res);
            }
        }
}

问题比较好处理，我们可根据 web 的 FileReader api来获取图片文件的base64位数据，结合 canvas 绘图对base64位数据进行压缩操作后上传到服务器。

然而在测试过程中发现，在ios上如果是竖拍，显示出来却是横着的，也就是ios的Safari把照片自动旋转了。这个怎么处理呢，把获得的图像转过来就好了。这里用到一个辅助的库：exif.js, exif 能够获取到图片的元数据，当然也包含了图片的方向信息（Orientation），我们可以根据这个信息对图片做转动处理，新增一个转动图像的方法，把代码优化一下：

uploadFile(e, type) {
    e.stopPropagation();
    let _this = this;
    let file = e.target.files[0];
    
    // 过滤非图片格式
    if (file && !/image\/\w+/.test(file.type)) {
    pageConfig.alert("文件必须为图片！");
    return false;
    }
    
    let reader = new FileReader();
    let filesize = Math.round(file.size / 1024);
    let mId = this.props.imgState.target;
    reader.onload = function () {
    let url = reader.result;
    canvasDataURL(url, filesize)
    }
    reader.readAsDataURL(file);  // 将文件转为base64
    
    
    //获取上传图片的Orientation并旋转
    function canvasDataURL(path) {
    var img = new Image();
    var canvas = document.createElement("canvas");
    let myBase64Img = '';
    img.onload = function () {
    EXIF.getData(this, function () {
    let imgOrientation = EXIF.getTag(this, 'Orientation');
    //如果方向角不为1，都需要进行旋转
    console.log('----Orientation-----', imgOrientation);
    if (imgOrientation != "" && imgOrientation != 1 && imgOrientation) {
    switch (imgOrientation) {
    case 6: //需要顺时针（向左）90度旋转
    myBase64Img = rotateImg(this, 'left', canvas);
    break;
    case 8: //需要逆时针（向右）90度旋转  
    myBase64Img = rotateImg(this, 'right', canvas);
    break;
    case 3: //需要180度旋转  
    myBase64Img = rotateImg(this, 'right', canvas); //转两次  
    myBase64Img = rotateImg(this, 'right', canvas);
    break;
    }
    } else {
    myBase64Img = rotateImg(this, 'none', canvas);
    }
    
    // 开始上传照片
    _this.startUploadPhoto(type, mId, myBase64Img);
    // _this.props.actions.queryImgState({ front: myBase64Img });
    });
    }
    img.src = path;
    }
    
    function rotateImg(img, direction, canvas) {
    //最小与最大旋转方向，图片旋转4次后回到原方向    
    var min_step = 0;
    var max_step = 3;
    if (img == null) return;
    
    // 图片原始尺寸
    var originWidth = img.width;
    var originHeight = img.height;
    // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
    var maxWidth = 800,
    maxHeight = 800;
    // 目标尺寸
    var targetWidth = originWidth,
    targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
    if (originWidth / originHeight > maxWidth / maxHeight) {
    // 更宽，按照宽度限定尺寸
    targetWidth = maxWidth;
    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
    } else {
    targetHeight = maxHeight;
    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
    }
    }
    
    var height = targetHeight;
    var width = targetWidth;
    var step = 2;
    if (step == null) {
    step = min_step;
    }
    if (direction == 'right') {
    step++;
    //旋转到原位置，即超过最大值    
    step > max_step && (step = min_step);
    } else if (direction == 'none') {
    step = 10;
    } else {
    step--;
    step < min_step && (step = max_step);
    }
    //旋转角度以弧度值为参数    
    var degree = step * 90 * Math.PI / 180;
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, targetWidth, targetHeight);
    switch (step) {
    case 0:
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
    break;
    case 1:
    canvas.width = height;
    canvas.height = width;
    ctx.rotate(degree);
    ctx.drawImage(img, 0, -height, targetWidth, targetHeight);
    break;
    case 2:
    canvas.width = width;
    canvas.height = height;
    ctx.rotate(degree);
    ctx.drawImage(img, -width, -height, targetWidth, targetHeight);
    break;
    case 3:
    canvas.width = height;
    canvas.height = width;
    ctx.rotate(degree);
    ctx.drawImage(img, -width, 0, targetWidth, targetHeight);
    break;
    case 10: // 不旋转
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
    break;
    }
    
    let dat = canvas.toDataURL("image/jpeg", 0.8);
    return dat;
    };

}