本文共 3710 字，大约阅读时间需要 12 分钟。

问题：使用layui上传图片的，出现图片旋转90度

解决办法：通过EXIF.getData获取图片信息，判断图片是否旋转

html:

    
           
       
   
   
    
    上传图片    
    
        
             
     
    
    
   

js:

layui.use('upload', function() {    var $ = layui.jquery        , upload = layui.upload;    //普通图片上传    var uploadInst = upload.render({        elem: '#test1'        , url: '/upload/'        , before: function (obj) {            //预读本地文件示例，不支持ie8            obj.preview(function (index, file, result) {                console.log(file)                EXIF.getData(file, function() {                    //获取图片Orientation                    orient = EXIF.getTag(this, 'Orientation');                    if(orient==6){//逆时针旋转了90度                        rotateBase64Img(result,90,callback);                    }else if(orient==1){                        $('#demo1').attr('src', result); //图片链接（base64）                    }                });            });        }        , done: function (res) {            //如果上传失败            if (res.code > 0) {                return layer.msg('上传失败');            }            //上传成功        }        , error: function () {            //演示失败状态，并实现重传            var demoText = $('#demoText');            demoText.html('上传失败 重试');            demoText.find('.demo-reload').on('click', function () {                uploadInst.upload();            });        }    });    //旋转base64图片    function rotateBase64Img(src, edg, callback) {        var canvas = document.createElement("canvas");        var ctx = canvas.getContext("2d");        var imgW;//图片宽度        var imgH;//图片高度        var size;//canvas初始大小        if (edg % 90 != 0) {            console.error("旋转角度必须是90的倍数!");            throw '旋转角度必须是90的倍数!';        }        (edg < 0) && (edg = (edg % 360) + 360)        const quadrant = (edg / 90) % 4; //旋转象限        const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标        var image = new Image();        image.crossOrigin = "anonymous"        image.src = src;        image.onload = function () {            imgW = image.width;            imgH = image.height;            size = imgW > imgH ? imgW : imgH;            canvas.width = size * 2;            canvas.height = size * 2;            switch (quadrant) {                case 0:                    cutCoor.sx = size;                    cutCoor.sy = size;                    cutCoor.ex = size + imgW;                    cutCoor.ey = size + imgH;                    break;                case 1:                    cutCoor.sx = size - imgH;                    cutCoor.sy = size;                    cutCoor.ex = size;                    cutCoor.ey = size + imgW;                    break;                case 2:                    cutCoor.sx = size - imgW;                    cutCoor.sy = size - imgH;                    cutCoor.ex = size;                    cutCoor.ey = size;                    break;                case 3:                    cutCoor.sx = size;                    cutCoor.sy = size - imgW;                    cutCoor.ex = size + imgH;                    cutCoor.ey = size + imgW;                    break;            }            ctx.translate(size, size);            ctx.rotate(edg * Math.PI / 180);            ctx.drawImage(image, 0, 0);            var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);            if (quadrant % 2 == 0) {                canvas.width = imgW;                canvas.height = imgH;            } else {                canvas.width = imgH;                canvas.height = imgW;            }            ctx.putImageData(imgData, 0, 0);            callback(canvas.toDataURL())        };    }    function callback(base64data) {        document.getElementById("demo1").src = base64data;    }});

转载地址：http://htssi.baihongyu.com/