图片旋转

发表于 分类于
本文字数： 1.8k 阅读时长 ≈ 2 分钟
原始图片比例不同情况下图片横行展示，旋转保持原始比例

图片加载判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
addImg = function (url) {
        let img = new Image();
        img.src = url;
        let imgDivDom = $("#imgDiv");
        let height = imgDivDom.outerHeight(true)
        let width = imgDivDom.outerWidth(true)
        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            imgDivDom.html('')
            imgDivDom.append(img)
            if (img.width > img.height) {
                imgDivDom.children('img').css({
                    "margin": "0 auto",
                    "height": height + "px",
                    "width": width + "px",
                    "object-fit": "contain"
                })
            } else {
                imgDivDom.children('img').css({
                    "display": "block",
                    "margin": "0 auto",
                    "height": width + "px",
                    "width": height + "px",
                    "object-fit": "contain",
                    "transform": "rotate(90deg)"
                })
            }

        } else {
            // 完全加载完毕的事件
            img.onload = function () {
                imgDivDom.html('')
                imgDivDom.append(img)
                if (img.width > img.height) {
                    imgDivDom.children('img').css({
                        "margin": "0 auto",
                        "height": height + "px",
                        "width": width + "px",
                        "object-fit": "contain"
                    })
                } else {
                    imgDivDom.children('img').css({
                        "display": "block",
                        "margin": "0 auto",
                        "height": width + "px",
                        "width": height + "px",
                        "object-fit": "contain",
                        "transform": "rotate(90deg)"
                    })
                }
            }
        }
        img.onerror = function (){
            imgDivDom.html('<div class="noImg">暂无图片</div>')
        }
    }

父级元素样式

1
2
display: flex;
align-items: center;