解决layui上传图片预览旋转90度的问题

最新推荐文章于 2024-06-04 17:34:22 发布

Skye Lin

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量3.2k

点赞数

分类专栏： js/jquery layui 文章标签： Orientation

本文链接：https://blog.csdn.net/skye_95/article/details/100555141

版权

layui 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

js/jquery

7 篇文章 0 订阅

订阅专栏

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

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

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/showImg.css">
</head>
<body>
<div class="layui-upload">
    <button class="layui-btn" id="test1" type="button">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
</div>

<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/showImg.js"></script>
<script type="text/javascript" src="../js/exif.js"></script>
</body>
</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('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            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;
    }
});

Skye Lin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
解决layui上传图片预览旋转90度的问题

问题：使用layui上传图片的，出现图片旋转90度解决办法：通过EXIF.getData获取图片信息，判断图片是否旋转html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&...
复制链接

扫一扫