前端图片旋转并保存系统用户上传的图片如证件照经常角度不正，可能是倒着的，所以在审核查看图片的时候很不方便，一般图片查看放

系统用户上传的图片如证件照经常角度不正，可能是倒着的，所以在审核查看图片的时候很不方便，一般图片查看放大的组件只有旋转和放大的功能，但是旋转查看完之后，下一次再打开放大，角度没有变化，还是倒的。所以这样就需要旋转完成之后进行保存，保存肯定是保存到后端数据库，只有数据库的数据源图片角度正确，下次打开页面图片的角度才是正确的。

方法一：就是前端进行图片旋转，将图片用canvas画布再重新画一张，旋转canvas画布，旋转完成后生成一张新的图片，将新图片传给后端，重新替换原来的图片。

//html...........................................................
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
            div {
                    margin: 0 auto;
                    text-align: center;
            }

            .canvas-img {
                    width: 500px;
                    height: 300px;
            }
    </style>
    </head>
    <body>
        <div>
            <div class="a">
                <img class="canvas-img" src="aaa.png" alt="" width="100%" id="temp-img">
            </div>
            <div class="canvas-box" style="display:none;"></div>
            <img id="modelImg" src="#" alt="">
            <br>
            <button id="left">左</button>
            <button id="right">右</button>
        </div>
    </body>
    <script src="jquery2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>

//js................................................
var deg = 90,
imgUrl = $('#temp-img').attr('src'),
imgW = parseInt($('#temp-img').width()),
imgH = parseInt($('#temp-img').height());
getBase64(imgUrl, imgW, imgH, deg)

function getBase64(imgUrl, imgW, imgH, deg) {
    //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
    var Img = new Image(),
    dataURL = '',
    deg = deg;
    Img.src = imgUrl;
    Img.onload = function() { //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
        ctx = canvas.getContext("2d"),
        //确保canvas的尺寸和图片一样
        width = imgW,
        height = imgH,
        w = deg % 180 == 0 ? width : height,
        h = deg % 180 == 0 ? height : width,
        obj = {
            x: w / 2,
            y: h / 2,
            w: width,
            h: height
        };
        canvas.width = w;
        canvas.height = h;

        ctx.translate(obj.x, obj.y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.translate(-obj.x, -obj.y);

        ctx.drawImage(Img, obj.x - obj.w / 2, obj.y - obj.h / 2, obj.w, obj.h); //将图片绘制到canvas中
        dataURL = canvas.toDataURL(); //转换图片为dataURL（转换成base64）
        $('.canvas-box').css({
            'width': w,
            'height': h
        }).html('');
        $('.canvas-box').append(canvas);
        console.log(dataURL)
        $("#modelImg").attr("src",dataURL)
    };
    return dataURL
}

$("#left").click(function(){
    deg -= 90
    getBase64(imgUrl, imgW, imgH, deg)
})

$("#right").click(function(){
    deg += 90
    getBase64(imgUrl, imgW, imgH, deg)
})

效果图

方法二：前端只需要获取到图片旋转的角度deg,将角度和图片唯一标识（id或url）传递给后端，后端完成数据源图片的旋转。此方法前端性能更经济，更简便。