移动端图片方向旋转和图片等比例压缩

问题

移动端选择照片上传，经常遇到这两个问题：照片方向错误，需要旋转，照片尺寸过大，需要压缩后像后台传输。

解决方法

针对这两个常见的问题，整理为以下函数：

/**
 * 旋转并等比例压缩
 * @param img
 * @param canvas
 * @param orientation 引入exif.js，可以通过 orientation = EXIF.getTag(this, 'Orientation'); 获得，或者相似方法获得
 * @param maxWidth
 * @param maxHeight
 */
function rotateByOrientationAndCompressImg(img, canvas, orientation, maxWidth, maxHeight) {
    switch (orientation) {
        case 3:
            rotateByDegreeAndCompressImg(img, canvas, 180, maxWidth, maxHeight);
            break;
        case 6:
            rotateByDegreeAndCompressImg(img, canvas, 90, maxWidth, maxHeight);
            break;
        case 8:
            rotateByDegreeAndCompressImg(img, canvas, 270, maxWidth, maxHeight);
            break;
        default:
            rotateByDegreeAndCompressImg(img, canvas, 0, maxWidth, maxHeight);
    }
}

/**
 * 旋转并等比例压缩
 * @param img 是 new Image() 类型
 * @param canvas 画布
 * @param degree 顺时针旋转的度数，单位是°，允许为 0（不旋转），90，180，270 共4种值
 * @param maxWidth 压缩后最大宽度，为null则不压缩
 * @param maxHeight 压缩后最大高度，为null则不压缩
 */
function rotateByDegreeAndCompressImg(img, canvas, degree, maxWidth, maxHeight) {
    var ctx = canvas.getContext('2d');
    /* 原来的宽和高 */
    var width = img.width;
    var height = img.height;
    /* 压缩后的宽和高 */
    var cWidth = width;
    var cHeight = height;
    if (maxWidth != null) {
        if (cWidth > maxWidth) {
            cHeight = parseInt(cHeight * maxWidth / cWidth);
            cWidth = maxWidth;
        }
    }
    if (maxHeight != null) {
        if (cHeight > maxHeight) {
            cWidth = parseInt(cWidth * maxHeight / cHeight);
            cHeight = maxHeight;
        }
    }
    switch (degree) {
        default:
        case 0:
            canvas.width = cWidth;
            canvas.height = cHeight;
            ctx.drawImage(img, 0, 0, cWidth, cHeight);
            break;
        case 90:
            canvas.width = cHeight;
            canvas.height = cWidth;
            ctx.rotate(90 * Math.PI / 180);
            ctx.drawImage(img, 0, -cHeight, cWidth, cHeight);
            break;
        case 180:
            canvas.width = cWidth;
            canvas.height = cHeight;
            ctx.rotate(180 * Math.PI / 180);
            ctx.drawImage(img, -cWidth, -cHeight, cWidth, cHeight);
            break;
        case 270:
            canvas.width = cHeight;
            canvas.height = cWidth;
            ctx.rotate(270 * Math.PI / 180);
            ctx.drawImage(img, -cWidth, 0, cWidth, cHeight);
            break;
    }
}

具体的使用示例见：
https://github.com/gaoice/js-utils/blob/master/rotate-compress-img/