放大镜系列之二：JS实现对图片的简单旋转及简易放大镜效果

本文链接：https://blog.csdn.net/tear_of_heaven/article/details/85060197

上一篇初步介绍了简易的放大镜效果。然而如果需求里又增加了一项，要求可以对图片进行90度，180度，270度旋转，我们又该如何实现呢？

首先先在html里加上一排旋转用的按钮，然后html的内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>

<head>
<title>zoom</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=”renderer” content=”webkit” />
<script src="./js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="./css/zoom.css">
</head>
<body>
<div class="step_wrapper">啦啦啦，我是萌萌的考拉君</div>
<div class="content">
<div id="leftWarp" class="leftWarp">
<div id="imgSrc" class="imgSrc" style="height: 100%">
<a id="zoom" >
<img id="currentImg" class="currentImg" src="./img/Koala.jpg" alt="" style="max-width:98%; max-height: 98%">
</a>
</div>
<ul class="imgBtn currentImgBtns" id="currentImgBtns">
<li class="fl" id="reduction">原图</li>
<li class="fl" id="routerAnti90">逆时针旋转90度</li>
<li class="fl" id="router90">顺时针旋转90度</li>
<li class="fl" id="router180">180度旋转</li>
</ul>
<div>
<input id="angle" type="hidden" value="0">
</div>
</div>
<div class="rightWarp" id="rightWarp">
</div>
<div id="currentImgDiv">
<span style="color: #fff;">This is 放大镜 speaking！！！</span>
</div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/zoom.js"></script>
<script type="text/javascript" src="./js/html5shiv.js"></script>
</html>

下一步先实现图片旋转的功能，先为每个旋转按钮绑定点击事件。

// 图片旋转
    var angle = 0; // 图片旋转角度
    $("#reduction").click(function() {
        angle = 0;
        rotationPic(0);
    });
    $("#routerAnti90").click(function() {
        angle = (angle + 270) % 360;
        rotationPic(angle);
    });
    $("#router90").click(function() {
        angle = (angle + 90) % 360;
        rotationPic(angle);
    });
    $("#router180").click(function() {
        angle = (angle + 180) % 360;
        rotationPic(angle);
    });

对于旋转的效果实现，最常用的是css3里的transform。transform里有一个rotate，其介绍如下：

rotate(angle)

定义 2D 旋转，在参数中规定角度。

那么js语句就十分好写了。

function rotationPic(angle) {
        var rotationI = 0;
        switch(angle) {
            case 0:
                rotationI = 0;
                break;
            case 90:
                rotationI = 1;
                break;
            case 180:
                rotationI = 2;
                break;
            case 270:
                rotationI = 3;
                break;
            default:
        }
        $("#currentImg").css("transform", "rotate(" + angle.toString() + "deg)");
        $("#currentImg").css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotationI.toString() +")");
        $("#angle").val(angle);
    }

细心的你可能会问$("#currentImg").css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotationI.toString() +")")这条js代码有何意义？嗯，只是为了兼容ie8而已，然后什么都不是了。据说ie8不兼容css3，我们只能用ie专属滤镜，参考资料请自行访问https://segmentfault.com/a/1190000002433305以及https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532853(v=vs.85)，图片旋转不推荐用ie滤镜的matrix因为很麻烦，只是旋转90度180度270度用rotation足矣。

最后只需要在放大镜的css里也加入一段旋转用的css就可以啦。

// Mouse motion on image
    $element.mousemove(function (e) {
        $currentImgDiv.css("visibility", "visible");
        var isOriginal = Math.abs($element.width() - NATIVE_IMG.width) < 10 ? true : false;
        var zoomeTimes = isOriginal ? 1.5 : 1;
        // Lens position coordinates
        var lensX = e.pageX - $options.width / 2;
        var lensY = e.pageY - $options.height / 2;
        // Relative coordinates of image
        var relX = e.offsetX;
        var relY = e.offsetY;
        // Zoomed image coordinates
        var zoomX = -Math.floor(relX / $element.width() * NATIVE_IMG.width * zoomeTimes - $options.width / 2);
        var zoomY = -Math.floor(relY / $element.height() * NATIVE_IMG.height * zoomeTimes - $options.height / 2);
        //console.log(relX+"/"+$element.width()+"*"+ NATIVE_IMG.width );
        var bgSize = zoomeTimes * NATIVE_IMG.width;
        

        var angle = parseInt($("#angle").val());
        // console.log('bup js angle',angle);
        var rotationI = 0;
        switch(angle) {
            case 0:
                rotationI = 0;
                break;
            case 90:
                rotationI = 1;
                break;
            case 180:
                rotationI = 2;
                break;
            case 270:
                rotationI = 3;
                break;
            default:
        }

        // Apply styles to lens
        $currentImgDiv.css({
            left                  : lensX,
            top                   : lensY,
            "background-image"    : "url(" + $IMAGE_URL + ")",
            "background-position-x": zoomX,
            "background-position-y": zoomY,
            "background-size"      : bgSize + "px",
            "transform"            : "rotate(" + angle.toString() + "deg)",
            "filter"               : "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotationI.toString() +")"
        });

    });

最后看一下chrome下的图片。